✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Reload content without page reload by using <a> tag

Hello,

I am using a CSS/JS framework to style my application (https://materializecss.com). This framework provides the feature of a tabbed navbar. It requires however, that the links to the pages in the tabs are put in <a> tags because they are childs of the <li> tag. I would like to know if it is possible to achive the non-reloading content refresh that a element achieves by using an <a> tag. Maybe someone here has already done it.

For reference, this is the code the framework provides as an example:

    <div class="nav-wrapper">
      <a href="#" class="brand-logo">Logo</a>
      <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">JavaScript</a></li>
      </ul>
    </div>

I would like to replace the <a> tags with links reffering to other pages in my dashboard and when the user clicks on them the page should not reload.

Thanks in advance.

You should be able to achieve this by starting the href of your <a> tags with a # and using the dcc.Location component (setting refresh=False) to update the content of your dashboard in a callback.

Thanks! This does exactly what I want.