There is a newer version of Luda.

Let's go!

Navigation

Create responsive header navigations and aside navigations easily.

Introduction

The navigation component includes three parts, a logo, a navigation menu and an open button. The navigation menu includes four parts, main navigation items, sub navigation items, a search field and a close button.

The open button and the close button only shows on small screens for toggling the navigation menu. Except these two buttons, all the other parts in a navigation component can be optional.

A navigation component can be created with these classes: .nav-header, .nav-aside, .nav-logo, .nav-open, .nav-menu, .nav-close, .nav-items and .nav-sub-items.

Let’s see the below examples for clarification.

Header Navigation

To create a header navigation, add the class .nav-header to a container, then wrap necessary elements like the below example.

<header class="nav-header">
  <!-- The logo -->
  <a class="nav-logo" href="/">
    <img src="..." alt="logo">
  </a>
  <!-- The open button -->
  <button class="nav-open btn btn-ico btn-text-light" data-toggle-for="header_menu">
    <i class="ico ico-menu"></i>
  </button>
  <!-- The menu -->
  <div class="nav-menu" data-toggle-target="header_menu">
    <!-- The close button -->
    <button class="nav-close btn btn-ico btn-text-light" data-toggle>
      <i class="ico ico-cross"></i>
    </button>
    <!-- The search field -->
    <div class="nav-search fm fm-search fm-small">
      <input type="search" placeholder="Search anything...">
    </div>
    <!-- The main menu items -->
    <nav class="nav-items" data-toggle>
      <a class="btn btn-text-light btn-active" href="#">Home</a>
      <a class="btn btn-text-light" href="#">Github</a>
    </nav>
    <!-- The sub menu items -->
    <nav class="nav-sub-items">
      <div class="dropdown-static dropdown-absolute-m dropdown-align-right">
        <button class="btn btn-ico-right btn-text-light">
          Admin<i class="ico ico-down"></i>
        </button>
        <div class="dropdown-menu mx-small-m">
          <div class="dropdown-items mt-small-m" data-toggle>
            <a class="btn btn-text-light" href="#">Profile</a>
            <a class="btn btn-text-light" href="#">Sign out</a>
          </div>
        </div>
      </div>
    </nav>
  </div>
</header>

Aside Navigation

To create an aside navigation, add the .nav-aside class to a container, then wrap necessary elements like the below example.

<aside class="nav-aside">
  <!-- The logo -->
  <a class="nav-logo" href="/">
    <img src="..." alt="logo">
  </a>
  <!-- The open button -->
  <button class="nav-open btn btn-ico btn-text-light" data-toggle-for="aside-menu">
    <i class="ico ico-menu"></i>
  </button>
  <!-- The menu -->
  <div class="nav-menu" data-toggle-target="aside-menu">
    <!-- The close button -->
    <button class="nav-close btn btn-ico btn-text-light" data-toggle>
      <i class="ico ico-cross"></i>
    </button>
    <!-- The search filed -->
    <div class="nav-search fm fm-search fm-small">
      <input type="search" placeholder="Search anything...">
    </div>
    <!-- The main menu items -->
    <nav class="nav-items" data-toggle>
      <a class="btn btn-text-light btn-active" href="#">Home</a>
      <a class="btn btn-text-light" href="#">Documentation</a>
      <a class="btn btn-text-light" href="#">Themes</a>
      <a class="btn btn-text-light" href="#">Changelog</a>
      <a class="btn btn-text-light" href="#">Github</a>
    </nav>
    <!-- The sub menu items -->
    <nav class="nav-sub-items">
      <div class="dropdown-static">
        <button class="btn btn-ico-right btn-text-light" data-none-toggle>
          Admin<i class="ico ico-down"></i>
        </button>
        <div class="dropdown-menu">
          <div class="dropdown-items" data-toggle>
            <a class="btn btn-text-light" href="#">Profile</a>
            <a class="btn btn-text-light" href="#">Sign out</a>
          </div>
        </div>
      </div>
    </nav>
  </div>
</aside>

Sass Variables

Size

$navigation-width-breakpoint: m !default

Default breakpoint for header navigations and aside navigations. The layouts of navigations change on this breakpoint.

$navigation-padding-rem: $spacing-tiny-rem $spacing-small-rem !default

$navigation-logo-margin-rem: 0 $spacing-small-rem !default

$navigation-logo-image-height-rem: 2rem !default

$navigation-open-button-margin-rem: 0 0 0 auto !default

$navigation-close-button-margin-rem: $spacing-small-rem $spacing-small-rem 0 auto !default

$navigation-search-field-margin-rem: $spacing-medium-rem !default

$navigation-items-margin-rem: $spacing-small-rem !default

$navigation-sub-items-margin-rem: $navigation-items-margin-rem !default

Header Navigation Sizes

$navigation-header-breakpoint-search-field-margin-rem: 0 $spacing-small-rem !default

$navigation-header-breakpoint-items-margin-rem: 0 auto 0 0 !default

$navigation-header-breakpoint-sub-items-margin-rem: 0 !default

$navigation-header-breakpoint-search-field-width-rem: 16rem !default

Aside Navigation Sizes

$navigation-aside-breakpoint-padding-rem: 0 !default

$navigation-aside-breakpoint-logo-margin-rem: 3 * $spacing-small-rem $spacing-medium-rem $spacing-small-rem !default

$navigation-aside-breakpoint-logo-image-height-rem: 7rem !default

$navigation-aside-breakpoint-logo-image-width-rem: 9rem !default

$navigation-aside-breakpoint-min-width-rem: 18rem !default

$navigation-aside-breakpoint-max-width-rem: 20rem !default

Others

$navigation-background: $background-color-dark !default

$navigation-header-breakpoint-dropdown-background: $navigation-background !default

$navigation-header-box-shadow: null !default

$navigation-aside-box-shadow: $navigation-header-box-shadow !default

$navigation-aside-breakpoint-box-shadow: none !default