Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬 Register for the Oct 27 webinar.

Generate Tabs menu from list of tabs

I need a Tabs component which is constructed from a list of names, where for each name a separate tab is created with the corresponding name as label and id. I need to have the generated tabs in separate divs which will then be populated with separate content.

Similarly to the example in the User Guide, I tried to output children of the Tabs component from a callback. This resulted in JavaScript Error: “Cannot read property disabled of undefined”.

Here is a simplified version of the code:

tabs_list = ['gen_tab1','gen_tab2']

def generate_tabs_html(available_tabs):
    tabs_html = """
        dcc.Tab(label='{}', id='{}', children=[
    for i in range (1,len(available_tabs)):
        tabs_html += """ 
        dcc.Tab(label='{}', id='{}', children=[

app.layout = html.Div([

    [dash.dependencies.Output('tabs', 'children') ],
    [dash.dependencies.Input('login-button', 'n_clicks')])
def update_graph(button_clicks):
    return generate_tabs_html(tabs_list)

I solved it - the output of the component generating function should not be string but simply the component. The different components can be then appended:

def generate_tabs_html(available_tabs):
tabs_html =
dcc.Tab(label=available_tabs[0], id=available_tabs[0], children=[

for i in range (1,len(available_tabs)):
    dcc.Tab(label=available_tabs[i], id=available_tabs[i], children=[

When I ran your code, there was an error saying that AttributeError: 'Tab' object has no attribute 'append'
:smiley: I just want to know how did you solve this problem?

Where you ever able to work around the attribute error. I need to be able to generate tabs off a list that could be different every-time the dash is created