Navigate to section in page

Dash Python
1

Hi,

I am trying to find a way to navigate to a section on the page that is loaded. That is, the page has html div components and a side bar that acts as an index. When a button on the sidebar is clicked, it should go to the html div section on the same page. I checked information on this link: URL Routing and Multiple Apps | Dash for Python Documentation | Plotly but it talks about linking to go to a different page, I did not see it doing what i want to do.

Can anyone help?

2

Hi @tanya

Here is a working example which allows you to scroll to the sections on the same page with the sidebar buttons or links.


import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

# the style arguments for the sidebar. We use position:fixed and a fixed width
SIDEBAR_STYLE = {
    "position": "fixed",
    "top": 0,
    "left": 0,
    "bottom": 0,
    "width": "16rem",
    "padding": "2rem 1rem",
    "background-color": "#f8f9fa",
}

# the styles for the main content position it to the right of the sidebar and
# add some padding.
CONTENT_STYLE = {
    "margin-left": "18rem",
    "margin-right": "2rem",
    "padding": "2rem 1rem",
}

sidebar = html.Div(
    [
        html.H2("Sidebar", className="display-4"),
        html.Hr(),
        html.P(
            "A simple sidebar layout with navigation links for same page", className="lead"
        ),
        dbc.Nav(
            [
                dbc.NavLink("Home", href="#start", external_link=True),
                dbc.NavLink("Mid", href="#mid",external_link=True),
                dbc.NavLink("End", href="#end",external_link=True),
            ],
            vertical=True,
            pills=True,
        ),
    ],
    style=SIDEBAR_STYLE,
)

content = html.Div(
            html.Div([html.P("Hello World", id="start")] +
                                  [html.Br()]*50 +
                                  [html.P("Middle World", id="mid")] +
                                  [html.Br()]*50 +
                                  [html.P("Goodbye world", id="end")]
                                 ),
    id="page-content", style=CONTENT_STYLE)


app.layout = html.Div([sidebar, content])



if __name__ == '__main__':
    app.run_server(debug=True, port=8022,use_reloader=False, host='127.0.0.1')
2 Likes