Side Navigation Menu

Hi all and @moe @Chem

This is a possible solution for this suggestion here -

We’re going to implement this - into our app.

First, we need to load the framework into the custom header/footer settings in you app settings. If you’ve seen this tutorial that uses the same framework, we have to approach this differently. We need to use only the sidenav components, rather than the entire CSS library. I’ve already prepared that file, you can find it HERE.

Next, we’re going to host this file within our app. Create a new Data Table with a single file field. Upload the CSS file to that Data Table.

After uploading the CSS file, we need the URL. Click on the CSS file in the Data Table, copy the URL when it opens and paste it somewhere safe for now.

Next, we’re going to go to Settings --> Custom Header/Footer Code and paste the following…

<link rel="stylesheet" href="YOUR_URL_FOR_MATERIALIZE.CSS_HERE">
<script src=""></script>

Remember to replace the URL for the css with your URL.

Now to put the HTML in our app. The way I tested it was to put an HTML component within a layout. This may not be the best approach for you depending on your app structure. I have not tested this outside of a layout.

Here’s the HTML from the Sidenav component…

<ul id="slide-out" class="sidenav">
    <li><div class="user-view">
      <div class="background">
        <img src="images/office.jpg">
      <a href="#user"><img class="circle" src="images/yuna.jpg"></a>
      <a href="#name"><span class="white-text name">John Doe</span></a>
      <a href="#email"><span class="white-text email"></span></a>
    <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
    <li><a href="#!">Second Link</a></li>
    <li><div class="divider"></div></li>
    <li><a class="subheader">Subheader</a></li>
    <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
  <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>

There’s an important bit to note here

You can’t use {Fields} within the HTML or the component stops working. There might be a way around this but it’s beyond my capabilities.

I simplified the HTML for use in this test. As you can see, every page I want to link to is written as a list item <li></li>. I also grabbed a background image and a menu icon to use.

<ul id="slide-out" class="sidenav">
<div class="user-view">
<div class="background"><img src="" /></div>
<div class="divider">&nbsp;</div>
<li><a href="https://your_URL">Leads</a></li>
<li><a href="https://your_URL">Jobs</a></li>
<li><a href="https://your_URL">Expenses</a></li>
<p><a class="sidenav-trigger" href="#" data-target="slide-out"><img src="" /></a></p>

The final thing to do is initialize the JS by adding this to the JS section of your layout.

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, options);

  // Initialize collapsible (uncomment the lines below if you use the dropdown variation)
  // var collapsibleElem = document.querySelector('.collapsible');
  // var collapsibleInstance = M.Collapsible.init(collapsibleElem, options);

  // Or with jQuery


Anyways, that’s pretty much it. I may have glossed over some of it, apologies for that. This is a very crude test and much of this is out of my league. I think the CSS file can be compiled differently. If you look at it, there’s still a lot of unused CSS. There’s also further documentation for the JS of the sidenav, but my JS experience is slim to none. Hopefully people can use this and elaborate on it!


Hello Tim,

I do like your idea about storing CSS file in Tadabase table, thats a sneaky one. I was keen to see your video but it doesn’t load. I’ve been stuck on this topic very long time now. Ideally, I want to stay away from plugins as much as possible…especially free ones.

I found placing HTML in the Layout doesn’t give the same quality result but prevents side/header nav from being displayed on login screen. Also lets not forget the role based layouts do contain different pages based on users role so not how the login routes would work if the nav html was placed in Layout.

Placing the html codes inside the Customer Header with CSS and JS inside Layout does produces a nice result but it means the side/header nav is applied throughout the app on all pages… which is not a good solution.

I tried hot linking and uploading BS 4.5.3… it worked and gave me additional stuff but same challenges remain regarding where to place the code. Also tried Bootstrap 5 alpa 3 which came out fews days ago… still exploring.

I tried various Admin Dashboards including getbootstrap… which got got close to what i wanted but not close enough. Admin 1 and Admin 2 in startbootstrap are both fantastic but too much work involved so i didn’t bother for now.

anyway… thought I’d share my half complete solutions so far:!/admin!/admin

Hi @Shumon

Admittedly, my posts here about a sidenav were pretty messy and scattered when I was first exploring it and I completely screwed up my Loom account and lost a lot of videos. I have an easier sidenav solution working now that I will try to post tonight.

To answer some of your questions/concerns…

  1. Is your login page set to the layout with the sidenav?
  2. Role based layouts are tough. I only use the sidenav on apps with minimal roles and rules. In order to make it work otherwise, you need to add multiple rows with containing the sidenav code and set each row to who’s allowed to see it. This takes a lot of manually updating, especially if you want to add new pages to the app.
  3. Overall, layout is the best place to add the sidenav as it gives you the most control.

Your apps look nice so far!