Go to homepage

Projects /

Drawer Navigation

Header template with drawer navigation.

View Demo


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 class="dr-nav-control-wrapper">
  <div class="container max-width-xl"> <!-- 👈 -->
    <!-- ... -->


Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.