⚡️ Black Friday ends in 1 day - 50% off CodyHouse Pro Lifetime →


Progress value is 30%

Drawer Navigation

Header template with drawer navigation.

View Demo


All components are based on CodyFrame.

If you're using this component, you should also include the SCSS/JS of the following components:

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"> <!-- 👈 -->
    <!-- ... -->

Project duplicated

Project created

Globals imported

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