Side Navigation

More documentation can be found MDB's site, here .

Slide Out Side Navigation

%i.material-icons.m-4.grey-text.text-darken-4.sidenav-hamburger{ data: { activates: "slide-out" } } menu

#slide-out.side-nav.fixed.custom-scrollbar
  .logo-wrapper.red
    = link_to "/index.html" do
      = image_tag "white-logo.png"
  %ul
    %li.separator= link_to "Home", "/index.html"
    %li= link_to "Buttons", "/buttons.html"
    %li= link_to "Color", "/colors.html"
    %li= link_to "Tooltip", "/tooltips.html"
    %li= link_to "Progress", "/progress_bar.html"
    %li= link_to "Toolbar", "/toolbar.html"
    %li= link_to "Form", "/forms.html"
    %li= link_to "Cards", "/cards.html"
    %li= link_to "Tabs", "/tabs.html"
    %li= link_to "Side Navigation", "/side_nav.html"

Persistent Side Navigation

This component is dependent on .d-flex surrounding the navigation and main content and a %i.material-icons.menu-action menu within the toolbar.

It will not function as intended without those requirements.

.d-flex
  = persistent_sidenav do
    = expandable_nav_item "Navigation Option" do
      = subnav_item "Subsection Option", root_path
      = subnav_item "Subsection Option", root_path
      = subnav_item "Subsection Option", root_path
    = nav_item "Navigation Option", root_path
  = yield