# How can i integrate multiple pages using top navigation bar

**URL:** <https://discuss.streamlit.io/t/how-can-i-integrate-multiple-pages-using-top-navigation-bar/85794>\
**Category:** Using Streamlit\
**Tags:** discussion\
**Created:** [November 16, 2024, 4:18pm UTC](https://discuss.streamlit.io/t/how-can-i-integrate-multiple-pages-using-top-navigation-bar/85794 "2024-11-16T16:18:32Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![om12](https://sea2.discourse-cdn.com/streamlit/user_avatar/discuss.streamlit.io/om12/32/52265_2.png) [@om12](https://discuss.streamlit.io/u/om12)\
**Post date:** [November 16, 2024, 4:18pm UTC](https://discuss.streamlit.io/t/how-can-i-integrate-multiple-pages-using-top-navigation-bar/85794/1 "2024-11-16T16:18:32Z")

</div>

1] I want to integrate 2 different files such that a user can navigate between the 2 using a top navigation bar.  
2] Can I use streamlit option menu to navigate to other page.

---

<div class="post-metadata">

**Author:** ![Encrypt](https://sea2.discourse-cdn.com/streamlit/user_avatar/discuss.streamlit.io/encrypt/32/52088_2.png) [@Encrypt](https://discuss.streamlit.io/u/Encrypt)\
**Post date:** [November 18, 2024, 10:56am UTC](https://discuss.streamlit.io/t/how-can-i-integrate-multiple-pages-using-top-navigation-bar/85794/2 "2024-11-18T10:56:12Z")

</div>

At present, Streamlit lacks a top navigation bar. However, you could explore a community-created custom component to achieve this functionality.

> [@New Component: Streamlit Navigation Bar](https://discuss.streamlit.io/t/new-component-streamlit-navigation-bar/66032):
>
> Streamlit Navigation Bar Hi everyone! I felt the need for a navigation bar for Streamlit apps and was not satisfied with the current solutions. So I created a component that allows anyone to place a navbar in their app. These are the guidelines I tried to follow: Be simple to use Look great out of the box Apply custom styles Integrate with Streamlit’s UI Have a well-written documentation It has some cool functionalities, like displaying an optional logo and external URLs. It also matches the…

To install it, run:

```auto
pip install streamlit-navigation-bar

```

Below is an example of how you could use it in your Streamlit app with multiple file pages:

```python
# pages/page_1.py

import streamlit as st

def show_page_1():
    st.title("Page 1")
    st.write("This is page 1")

```

```python
# pages/page_2.py

import streamlit as st

def show_page_2():
    st.title("Page 2")
    st.write("This is page 2")

```

```python
# app.py

import streamlit as st
from streamlit_navigation_bar import st_navbar

import pages as pg

st.set_page_config(initial_sidebar_state="collapsed")

pages = ['page1', 'page2']

options = {
    "show_menu": False,
    "show_sidebar": False,
}

page = st_navbar(
    pages,
    options=options,
)

functions = {
    'page1': pg.page_1.show_page_1,
    'page2': pg.page_2.show_page_2,
}
go_to = functions.get(page)
if go_to:
    go_to()

```

---

<div class="post-metadata">

**Author:** ![Kaci](https://sea2.discourse-cdn.com/streamlit/user_avatar/discuss.streamlit.io/kaci/32/49464_2.png) [@Kaci](https://discuss.streamlit.io/u/Kaci)\
**Post date:** [January 15, 2025, 10:52pm UTC](https://discuss.streamlit.io/t/how-can-i-integrate-multiple-pages-using-top-navigation-bar/85794/3 "2025-01-15T22:52:41Z")

</div>

Im not sure why but I am getting an attribute error when copy and pasting this code exactly.

saying modules ‘pages’ has no attribute to ‘page\_1’. I have double checked my file structures and all the names and they are all correct. Am I missing something?

```auto
# app.py

import streamlit as st
from streamlit_navigation_bar import st_navbar

import pages as pg

st.set_page_config(initial_sidebar_state="collapsed")

pages = ['page1', 'page2']

options = {
    "show_menu": False,
    "show_sidebar": False,
}

page = st_navbar(
    pages,
    options=options,
)

functions = {
    'page1': pg.page_1.show_page_1,
    'page2': pg.page_2.show_page_2,
}
go_to = functions.get(page)
if go_to:
    go_to()

```

page\_1:

```auto
# pages/page_1.py

import streamlit as st

def show_page_1():
    st.title("Page 1")
    st.write("This is page 1")

```

page 2:

```auto
# pages/page_2.py

import streamlit as st

def show_page_2():
    st.title("Page 2")
    st.write("This is page 2")

```

---

<div class="post-metadata">

**Author:** ![Encrypt](https://sea2.discourse-cdn.com/streamlit/user_avatar/discuss.streamlit.io/encrypt/32/52088_2.png) [@Encrypt](https://discuss.streamlit.io/u/Encrypt)\
**Post date:** [January 30, 2025, 5:49pm UTC](https://discuss.streamlit.io/t/how-can-i-integrate-multiple-pages-using-top-navigation-bar/85794/4 "2025-01-30T17:49:24Z")

</div>

Ensure that the pages folder, `app.py`, and virtual environment are all located within the same directory. Additionally, the parent folder should be the current working directory in the terminal.

---

<div class="post-metadata">

**Author:** ![Yogesh9](https://sea2.discourse-cdn.com/streamlit/user_avatar/discuss.streamlit.io/yogesh9/32/63668_2.png) [@Yogesh9](https://discuss.streamlit.io/u/Yogesh9)\
**Post date:** [May 10, 2025, 9:00am UTC](https://discuss.streamlit.io/t/how-can-i-integrate-multiple-pages-using-top-navigation-bar/85794/5 "2025-05-10T09:00:17Z")

</div>

But this solution is not mobile device friendly. Any other way?

---

<div class="post-metadata">

**Author:** ![jrieke](https://sea2.discourse-cdn.com/streamlit/user_avatar/discuss.streamlit.io/jrieke/32/47685_2.png) [@jrieke](https://discuss.streamlit.io/u/jrieke)\
**Post date:** [May 14, 2025, 2:33am UTC](https://discuss.streamlit.io/t/how-can-i-integrate-multiple-pages-using-top-navigation-bar/85794/6 "2025-05-14T02:33:39Z")

</div>

We’re currently working on a native top navigation bar in Streamlit (that will also be mobile-friendly), feel free to follow along here: [[Coming soon] Top navigation bar for multipage apps · Issue #727 · streamlit/streamlit · GitHub](https://github.com/streamlit/streamlit/issues/727)

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/streamlit/original/3X/c/f/cf4c2ee0d938358f82448c5fe4b9c3c91d7ce19c.svg) [@system](https://discuss.streamlit.io/u/system)\
**Post date:** [November 10, 2025, 2:34am UTC](https://discuss.streamlit.io/t/how-can-i-integrate-multiple-pages-using-top-navigation-bar/85794/7 "2025-11-10T02:34:15Z")

</div>

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.