star

Tip

Check out our tutorial to learn about building custom, dynamic menus with st.page_link.

Display a link to another page in a multipage app or to an external page.

If another page in a multipage app is specified, clicking st.page_link stops the current page execution and runs the specified page as if the user clicked on it in the sidebar navigation.

If an external page is specified, clicking st.page_link opens a new tab to the specified page. The current script run will continue if not complete.

Function signature[source]

st.page_link(page, *, label=None, icon=None, help=None, disabled=False, use_container_width=None)

Parameters

page (str, Path, or st.Page)

The file path (relative to the main script) or an st.Page indicating the page to switch to. Alternatively, this can be the URL to an external page (must start with "http://" or "https://").

label (str)

The label for the page link. Labels are required for external pages. The label can optionally contain GitHub-flavored Markdown of the following types: Bold, Italics, Strikethroughs, Inline Code, Links, and Images. Images display like icons, with a max height equal to the font height.

Unsupported Markdown elements are unwrapped so only their children (text contents) render. Display unsupported elements as literal characters by backslash-escaping them. E.g., "1\. Not an ordered list".

See the body parameter of st.markdown for additional, supported Markdown directives.

icon (str or None)

An optional emoji or icon to display next to the button label. If icon is None (default), no icon is displayed. If icon is a string, the following options are valid:

  • A single-character emoji. For example, you can set icon="🚨" or icon="πŸ”₯". Emoji short codes are not supported.

  • An icon from the Material Symbols library (rounded style) in the format ":material/icon_name:" where "icon_name" is the name of the icon in snake case.

    For example, icon=":material/thumb_up:" will display the Thumb Up icon. Find additional icons in the Material Symbols font library.

help (str)

An optional tooltip that gets displayed when the link is hovered over.

disabled (bool)

An optional boolean that disables the page link if set to True. The default is False.

use_container_width (bool)

Whether to expand the link's width to fill its parent container. The default is True for page links in the sidebar and False for those in the main app.

Example

Consider the following example given this file structure:

your-repository/
β”œβ”€β”€ pages/
β”‚   β”œβ”€β”€ page_1.py
β”‚   └── page_2.py
└── your_app.py
import streamlit as st

st.page_link("your_app.py", label="Home", icon="🏠")
st.page_link("pages/page_1.py", label="Page 1", icon="1️⃣")
st.page_link("pages/page_2.py", label="Page 2", icon="2️⃣", disabled=True)
st.page_link("http://www.google.com", label="Google", icon="🌎")

The default navigation is shown here for comparison, but you can hide the default navigation using the client.showSidebarNavigation configuration option. This allows you to create custom, dynamic navigation menus for your apps!

forum

Still have questions?

Our forums are full of helpful information and Streamlit experts.