Navigate to section in page but after a break

[mrel]

Hi everyone!

I am trying to make a sidebar which navigates to different sections of the same page.
I took the code from this post as an example.

Navigate to section in page

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?

The problem is that I also have a NavBar with a certain background color on top of the page. So when items from sidebar are clicked they are scrolled to the very top of the page and the first row or two of the content gets hidden under the navbar.

Is there any way to tell NavLink to scroll to the section of the page but start that section right after the NavBar ? Or scroll to the section of the page but paste a couple “html.Br()” before the content so that breaks get under NavBar and then content starts?

The code from the link I pasted above uses this:
dbc.NavLink(“Home”, href=“#start”, external_link=True)

Can we somehow change it to something like:
dbc.NavLink(“Home”, “html.Br()”+ href=“#start”, external_link=True)

The only “work-around” I came up with is to make the NavBar transparent. Then NavLink takes the selected section of the page to the very top, but because NavBar is transparent no content is hidden.
But if possible I would like to keep the background color of the NavBar and make NavLink start the content after the NavBar.

I hope I was able to explain the issue clearly.

Thanks in advance for any help and recommendations.

Kind regards.

[adamschroeder]

@mrel

Is there any way to tell NavLink to scroll to the section of the page but start that section right after the NavBar ?

HI @mrel ,
Have you tried looking into Dash Pages?
One possible solution to the above question is to create your navbar in the app.layout (in the app.py file), then, below the navbar, put the dash.page_container. Ann’s repo has many good examples of multipage dash apps.