Reload content without page reload by using <a> tag

Dash Python
1

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.

2

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.

3

Thanks! This does exactly what I want.