Drawer Navigation

Header template with drawer navigation.

Dependencies

• Radio Switch
• Drawer
• Search Input
• Animated Menu Button

How to

The Drawer Navigation component is used to display a minimal header along with a drawer/side navigation.

The menu button (.dr-nav-control-wrapper) is the only element of the header in position fixed. If there's enough content to scroll, the menu button will remain sticky.

Make sure the max-width utility class applied to the .dr-nav-header > .container element is equal to the one applied to the .dr-nav-control-wrapper > .container element.

<header class="dr-nav-header">
  <div class="container max-width-xl"> <!-- 👈 -->
    <!-- ... -->
  </div>
</header>

<div class="dr-nav-control-wrapper">
  <div class="container max-width-xl"> <!-- 👈 -->
    <!-- ... -->
  </div>
</div>

Categories

• Navigation > Header
• Navigation > Side Nav

Bug report & feedback

Component Github page ↗