Adding Dynamically Generated URLs to the App

We now want to complete our main layout with a navigation bar, a home page link, as well as a drop-down menu for the countries. To achieve that, we introduce the NavbarSimple component from Dash Bootstrap Components and see how we can use it.

The NavbarSimple component

The NavbarSimple component will take a few elements to create the structure we want, as follows:

1. We first create the navigation bar and give it brand and brand_href arguments to indicate what the name would be and where it would link to.

   import dash_bootstrap_components as dbc
   dbc.NavbarSimple([
       ...
   ], brand="Home", brand_href="/")
   

2. For its children argument, we’ll add a dbc.DropdownMenu component. We’ll also give it a label value so users know what to expect when they click the menu. We’ll fill its children argument in the next step.

   dbc.DropdownMenu(children=[
       menu_item_1,
       menu_item_2,
       ...
   ], label="Select country")
   

3. We now need to supply a list of dbc.DropdownMenuItem components to the drop-down menu. Those items will each get children and href arguments. Both of these will be for a country from the list of countries we created in the previous section.

   dbc.DropdownMenu([
       dbc.DropdownMenuItem(country, href=country)
       for country in countries
   ])
   

The full NavbarSimple component put together with the code can be seen here: