# Multi page app Navbar links with URL prefix (base\_pathname) not generating

**URL:** <https://community.plotly.com/t/multi-page-app-navbar-links-with-url-prefix-base-pathname-not-generating/77319>\
**Category:** Dash Python\
**Created:** [July 31, 2023, 4:28pm UTC](https://community.plotly.com/t/multi-page-app-navbar-links-with-url-prefix-base-pathname-not-generating/77319 "2023-07-31T16:28:36Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![guidocioni](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/guidocioni/32/31836_2.png) [@guidocioni](https://community.plotly.com/u/guidocioni)\
**Post date:** [July 31, 2023, 4:28pm UTC](https://community.plotly.com/t/multi-page-app-navbar-links-with-url-prefix-base-pathname-not-generating/77319/1 "2023-07-31T16:28:36Z")

</div>

I have a multi page app structured like this:

```auto
|-- src
| |-- components
| | |-- __init__.py
| | |-- navbar.py
| |-- pages
| | |-- __init__.py
| | |-- home.py
| |-- app.py

```

In `navbar.py` I’m trying to create the link to every page dynamically like so (as shown in the example here [https://github.com/AnnMarieW/dash-multi-page-app-demos/blob/main/multi\_page\_basics\_pathname\_prefix/app.py](https://github.com/AnnMarieW/dash-multi-page-app-demos/blob/main/multi_page_basics_pathname_prefix/app.py))

```python
navbar = dbc.Navbar(
    dbc.Container(
        [
            dbc.NavbarToggler(id='navbar-toggler', n_clicks=0),
            dbc.Collapse(
                dbc.Nav(
                     [
                        dbc.NavItem(
                             dbc.NavLink(page['name'], href=page["relative_path"])
                        ) for page in dash.page_registry.values()
                     ],
                ),
                id='navbar-collapse',
                navbar=True
            ),
        ]
    ),
)

```

The `navbar` is included in the main `app.py` quite simply like

```python
def serve_layout():
    return html.Div(
        [
            navbar,
            dbc.Container(
                dash.page_container,
                class_name='my-2'
            ),
        ]
    )

```

With this code the navbar does not show, probably because it cannot access `dash.page_registry`. I’ve tried encapsulating it into a function that returns `navbar` but this causes the layout to not load at all.

As workaround at the moment I’m creating the links manually, i.e.

```python
navbar = dbc.Navbar(
    dbc.Container(
        [
            dbc.NavbarToggler(id='navbar-toggler', n_clicks=0),
            dbc.Collapse(
                dbc.Nav(
                    [
                        dbc.NavItem(
                            dbc.NavLink(
                                'Home',
                                href=URL_BASE_PATHNAME
                            )
                        ),
                        dbc.NavItem(
                            dbc.NavLink(
                                'Ensemble',
                                href=f'{URL_BASE_PATHNAME}ensemble/'
                            )
                        ),
                    ],
                ),
                id='navbar-collapse',
                navbar=True
            ),
        ]
    ),
)

```

Any idea how I could fix this?

---

<div class="post-metadata">

**Author:** ![stpnvKirill](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/stpnvkirill/32/24919_2.png) [@stpnvKirill](https://community.plotly.com/u/stpnvKirill)\
**Post date:** [July 31, 2023, 4:36pm UTC](https://community.plotly.com/t/multi-page-app-navbar-links-with-url-prefix-base-pathname-not-generating/77319/2 "2023-07-31T16:36:17Z")

</div>

I suspect that the problem is that you create the navbar earlier than you register the pages.

Please check it.

---

<div class="post-metadata">

**Author:** ![guidocioni](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/guidocioni/32/31836_2.png) [@guidocioni](https://community.plotly.com/u/guidocioni)\
**Post date:** [July 31, 2023, 5:09pm UTC](https://community.plotly.com/t/multi-page-app-navbar-links-with-url-prefix-base-pathname-not-generating/77319/3 "2023-07-31T17:09:24Z")

</div>

The pages are registered in their own module, but the import is done automatically by Dash, as I’m using `use_pages=True` in `app.py`.

The `navbar` is also defined in its own module and imported in the `layout` of the main `app.py`.

I’m not sure how I could change the order in which everything is created as it is handled automatically by Dash in this case.  
Am I wrong?

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [July 31, 2023, 5:12pm UTC](https://community.plotly.com/t/multi-page-app-navbar-links-with-url-prefix-base-pathname-not-generating/77319/4 "2023-07-31T17:12:02Z")

</div>

What happens if you change the directory from `components` to `utils`?

Where are you importing the file for the navbar?

---

<div class="post-metadata">

**Author:** ![guidocioni](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/guidocioni/32/31836_2.png) [@guidocioni](https://community.plotly.com/u/guidocioni)\
**Post date:** [July 31, 2023, 5:18pm UTC](https://community.plotly.com/t/multi-page-app-navbar-links-with-url-prefix-base-pathname-not-generating/77319/5 "2023-07-31T17:18:14Z")

</div>

The source code is [here](https://github.com/guidocioni/point_wx/tree/main/src)

I do already have a `utils` folder with some common modules.

The only place where `navbar` is imported is the main `app.py` with

```python
from components import navbar

```

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [July 31, 2023, 5:21pm UTC](https://community.plotly.com/t/multi-page-app-navbar-links-with-url-prefix-base-pathname-not-generating/77319/6 "2023-07-31T17:21:38Z")

</div>

Hmm, try this:

```auto
def navbar():
    navbar = dbc.Navbar(
        dbc.Container(
            [
                dbc.NavbarToggler(id='navbar-toggler', n_clicks=0),
                dbc.Collapse(
                    dbc.Nav(
                         [
                            dbc.NavItem(
                                 dbc.NavLink(page['name'], href=page["relative_path"])
                            ) for page in dash.page_registry.values()
                         ],
                    ),
                    id='navbar-collapse',
                    navbar=True
                ),
            ]
        ),
    )
    return navbar

```

And then when you want the navbar, replace `navbar` with `navbar()`

---

<div class="post-metadata">

**Author:** ![guidocioni](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/guidocioni/32/31836_2.png) [@guidocioni](https://community.plotly.com/u/guidocioni)\
**Post date:** [July 31, 2023, 5:28pm UTC](https://community.plotly.com/t/multi-page-app-navbar-links-with-url-prefix-base-pathname-not-generating/77319/7 "2023-07-31T17:28:34Z")

</div>

> [@jinnyzor](#):
>
> `relative_path`

You know what? I’m an idiot -.-

I did try to encapsulate it into a function but then forgot to call the function in `app.py`, so it is indeed working 🙂

I Just had to modify `page['name']` with `page['title']` because I’m setting the name to ` __name__ ` but for the rest it works flawlessly!

Thanks for pointing out the typo