Mobile navigation

Mobile navigation adds a responsive multi-level navigation menu to your project.

Examples

Base

Click menu button to open Mobile navigation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu dignissim nisi, gravida pharetra elit. Etiam eu urna orci. Nulla et lorem eleifend, ultrices massa id, molestie urna. Nulla nec quam in turpis fermentum dictum vitae ac nibh. Suspendisse lacus nisi, sollicitudin in commodo quis, euismod id enim. Donec semper nunc et tellus convallis, tristique varius turpis gravida. Quisque hendrerit magna ac bibendum molestie. Nullam scelerisque libero vitae lorem dignissim ullamcorper. Integer mollis auctor enim vel molestie. Etiam id vestibulum augue, vitae dapibus quam. Nunc tincidunt aliquet lacus nec malesuada. Donec ultricies augue non lorem eleifend, eget ullamcorper lacus elementum. Donec condimentum enim nec justo auctor, nec bibendum ipsum dapibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu dignissim nisi, gravida pharetra elit. Etiam eu urna orci. Nulla et lorem eleifend, ultrices massa id, molestie urna. Nulla nec quam in turpis fermentum dictum vitae ac nibh. Suspendisse lacus nisi, sollicitudin in commodo quis, euismod id enim. Donec semper nunc et tellus convallis, tristique varius turpis gravida. Quisque hendrerit magna ac bibendum molestie. Nullam scelerisque libero vitae lorem dignissim ullamcorper. Integer mollis auctor enim vel molestie. Etiam id vestibulum augue, vitae dapibus quam. Nunc tincidunt aliquet lacus nec malesuada. Donec ultricies augue non lorem eleifend, eget ullamcorper lacus elementum. Donec condimentum enim nec justo auctor, nec bibendum ipsum dapibus.

<!-- Trigger -->
<button class="chi-button -icon -flat" id="mobile-navigation-base-trigger" data-target="#mobile-navigation-base-example" aria-label="Open Menu">
  <div class="chi-button__content">
    <i class="chi-icon icon-menu -sm--2" aria-hidden="true"></i>
  </div>
</button>

<!-- Mobile Navigation -->
<div class="chi-mobile-nav" id="mobile-navigation-base-example">
  <div class="chi-backdrop -position--absolute -animated">
    <div class="chi-backdrop__wrapper">
      <div class="chi-drawer -left -animated chi-mobile-nav__first-level -position--absolute -active">
        <div class="-position--relative">
          <div class="chi-mobile-nav__first-level-content -w--100">
            <div class="chi-drawer__header chi-mobile-nav__header">
              <button class="chi-button -icon -close" aria-label="Close">
                <div class="chi-button__content">
                  <i class="chi-icon icon-x" aria-hidden="true"></i>
                </div>
              </button>
            </div>
            <div class="chi-drawer__content chi-mobile-nav__content">
              <div class="-p--3">
                <a class="chi-button -outline -primary -fluid -uppercase -lg -mb--1" href="#">Sign In</a>
                <a class="chi-button -primary -uppercase -fluid -lg" href="#">Register</a>
              </div>
              <div class="chi-divider -mt--0 -mb--2"></div>
              <ul class="chi-tabs -vertical -icons -lg">
                <li><a class="-pl--4" href="#tab-link">Home</a></li>
                <li><a class="-pl--4" href="#tab-link">APIs</a></li>
                <li class="-active"><a class="-pl--4 chi-drawer__subitem-list-trigger" href="#base-second-level-1">Products</a></li>
                <li><a class="-pl--4" href="#tab-link">Help &amp; Support</a></li>
              </ul>
              <div class="chi-divider -mt--2 -mb--0"></div>
              <div class="chi-search -p--3">
                <div class="chi-input__wrapper -icon--right">
                  <input class="chi-input chi-search__input" id="example-search-id" type="text" placeholder="Search" aria-label="Search">
                  <i class="chi-icon icon-search" aria-hidden="true"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="chi-mobile-nav__drawers">
          <div class="chi-drawer -right -position--absolute" id="base-second-level-1">
            <div class="chi-drawer__header chi-mobile-nav__header">
              <button class="chi-button -flat -icon -no-hover -back" aria-label="Back">
                <div class="chi-button__content"><i class="chi-icon icon-chevron-left" aria-hidden="true"></i></div>
              </button>
              <div class="chi-mobile-nav__header-title">Products</div>
              <button class="chi-button -icon -close" aria-label="Close">
                <div class="chi-button__content"><i class="chi-icon icon-x" aria-hidden="true"></i></div>
              </button>
            </div>
            <div class="chi-drawer__content chi-mobile-nav__content">
              <div class="chi-accordion">
                <a href="#"><span>Browse All Products</span></a>
                <a href="#"><span>Business Management</span></a>
                <a href="#"><span>CenturyLink Partner</span></a>
                <a href="#"><span>Communications</span></a>
                <a href="#"><span>Edge Services</span></a>
                <a href="#"><span>Lumen Channel Partners</span></a>
                <a href="#"><span>Networking</span></a>
                <a href="#"><span>Security</span></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- JavaScript -->
<script>
  chi.mobilenav(document.querySelector("#mobile-navigation-base-trigger"));
</script>

Control Center

Click menu button to open Mobile navigation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu dignissim nisi, gravida pharetra elit. Etiam eu urna orci. Nulla et lorem eleifend, ultrices massa id, molestie urna. Nulla nec quam in turpis fermentum dictum vitae ac nibh. Suspendisse lacus nisi, sollicitudin in commodo quis, euismod id enim. Donec semper nunc et tellus convallis, tristique varius turpis gravida. Quisque hendrerit magna ac bibendum molestie. Nullam scelerisque libero vitae lorem dignissim ullamcorper. Integer mollis auctor enim vel molestie. Etiam id vestibulum augue, vitae dapibus quam. Nunc tincidunt aliquet lacus nec malesuada. Donec ultricies augue non lorem eleifend, eget ullamcorper lacus elementum. Donec condimentum enim nec justo auctor, nec bibendum ipsum dapibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu dignissim nisi, gravida pharetra elit. Etiam eu urna orci. Nulla et lorem eleifend, ultrices massa id, molestie urna. Nulla nec quam in turpis fermentum dictum vitae ac nibh. Suspendisse lacus nisi, sollicitudin in commodo quis, euismod id enim. Donec semper nunc et tellus convallis, tristique varius turpis gravida. Quisque hendrerit magna ac bibendum molestie. Nullam scelerisque libero vitae lorem dignissim ullamcorper. Integer mollis auctor enim vel molestie. Etiam id vestibulum augue, vitae dapibus quam. Nunc tincidunt aliquet lacus nec malesuada. Donec ultricies augue non lorem eleifend, eget ullamcorper lacus elementum. Donec condimentum enim nec justo auctor, nec bibendum ipsum dapibus.

<!-- Trigger -->
<button class="chi-button -icon -flat" id="mobile-navigation-interaction-trigger" data-target="#mobile-navigation-example" aria-label="Open Menu">
  <div class="chi-button__content">
    <i class="chi-icon icon-menu -sm--2" aria-hidden="true"></i>
  </div>
</button>

<!-- Mobile Navigation -->
<div class="chi-mobile-nav" id="mobile-navigation-example">
  <div class="chi-backdrop -closed -position--absolute -animated">
    <div class="chi-backdrop__wrapper">
      <div class="chi-drawer -left -animated chi-mobile-nav__first-level -position--absolute">
        <div class="-position--relative">
          <div class="chi-mobile-nav__first-level-content -w--100">
            <div class="chi-drawer__header chi-mobile-nav__header">
              <button
                class="chi-button -flat chi-dropdown__trigger -animate -no-hover -b--transparent"
                id="button-site-menu2"
                data-target="dropdown-2-menu"
              >
                Control Center
              </button>
              <button class="chi-button -icon -close" aria-label="Close">
                <div class="chi-button__content">
                  <i class="chi-icon icon-x" aria-hidden="true"></i>
                </div>
              </button>
            </div>
            <div class="chi-mobile-nav__dropdown">
              <div
                class="chi-dropdown__menu -list chi-mobile-nav__dropdown-content"
                id="dropdown-2-menu"
              >
                <a class="chi-dropdown__menu-item -h--auto -active" href="#">
                  <span class="chi-dropdown__menu-item_title">App name</span>
                  <span class="chi-dropdown__menu-item_text">
                    App description
                  </span>
                </a>
                <a class="chi-dropdown__menu-item -h--auto" href="#">
                  <span class="chi-dropdown__menu-item_title">App name 2</span>
                  <span class="chi-dropdown__menu-item_text">
                    App description
                  </span>
                </a>
                <a class="chi-dropdown__menu-item -h--auto" href="#">
                  <span class="chi-dropdown__menu-item_title">App name 3</span>
                  <span class="chi-dropdown__menu-item_text">
                    App description
                  </span>
                </a>
              </div>
            </div>
            <div class="chi-drawer__content chi-mobile-nav__content">
              <div class="chi-mobile-nav__user">
                <div class="chi-mobile-nav__user-name">
                  <span>Alessandro Ray</span>
                </div>
                <button
                  class="chi-button -flat chi-dropdown__trigger -px--1 -animate -no-hover -b--transparent -text--normal"
                  id="button-user-menu2"
                  data-target="dropdown-3-menu"
                >
                  Menu
                </button>
              </div>
              <div class="chi-mobile-nav__dropdown">
                <div
                  class="chi-dropdown__menu chi-mobile-nav__dropdown-content"
                  id="dropdown-3-menu"
                >
                  <a class="chi-dropdown__menu-item" href="#">
                    <i class="chi-icon icon-user" aria-hidden="true"></i>
                    <span>Item 1</span>
                  </a>
                  <a class="chi-dropdown__menu-item" href="#">
                    <i class="chi-icon icon-logout" aria-hidden="true"></i>
                    <span>Item 2</span>
                  </a>
                </div>
              </div>
              <ul class="chi-tabs -vertical -icons">
                <li class="-active">
                  <a
                    href="#second-level-1"
                    class=" chi-drawer__subitem-list-trigger"
                  >
                    <i class="chi-icon icon-atom" aria-hidden="true"></i>
                    <span>Toggle me</span>
                  </a>
                </li>
                <li>
                  <a
                    href="#second-level-2"
                    class=" chi-drawer__subitem-list-trigger"
                  >
                    <i class="chi-icon icon-atom" aria-hidden="true"></i>
                    <span>Toggle me</span>
                  </a>
                </li>
                <li>
                  <a href="#tab-link">
                    <i class="chi-icon icon-atom" aria-hidden="true"></i>
                    <span>Tab link</span>
                  </a>
                </li>
                <li>
                  <a href="#tab-link">
                    <i class="chi-icon icon-atom" aria-hidden="true"></i>
                    <span>Tab link</span>
                  </a>
                </li>
              </ul>
              <div class="chi-divider"></div>
              <ul class="chi-tabs -vertical -icons">
                <li>
                  <a class="-text--primary" href="#tab-link">
                    <i class="chi-icon icon-user" aria-hidden="true"></i>
                    <span>My Profile</span>
                  </a>
                </li>
                <li>
                  <a class="-text--primary" href="#tab-link">
                    <i
                      class="chi-icon icon-bell-settings-outline"
                      aria-hidden="true"
                    ></i>
                    <span>Notification Settings</span>
                  </a>
                </li>
                <li>
                  <a class="-text--primary" href="#tab-link">
                    <i class="chi-icon icon-logout" aria-hidden="true"></i>
                    <span>Sign Out</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="chi-mobile-nav__drawers">
          <div
            class="chi-drawer -right -position--absolute"
            id="second-level-1"
          >
            <div class="chi-drawer__header chi-mobile-nav__header">
              <button
                class="chi-button -flat -icon -no-hover -back"
                aria-label="Back"
              >
                <div class="chi-button__content">
                  <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
                </div>
              </button>
              <div class="chi-mobile-nav__header-title">Toggle me</div>
              <button class="chi-button -icon -close" aria-label="Close">
                <div class="chi-button__content">
                  <i class="chi-icon icon-x" aria-hidden="true"></i>
                </div>
              </button>
            </div>
            <div class="chi-drawer__content chi-mobile-nav__content">
              <div class="chi-accordion">
                <div class="chi-accordion__item">
                  <button class="chi-accordion__trigger">
                    <div class="chi-accordion__title">Item 1</div>
                    <i
                      class="chi-icon icon-chevron-down"
                      aria-hidden="true"
                    ></i>
                  </button>
                  <div class="chi-accordion__content">
                    <div class="chi-accordion">
                      <div class="chi-accordion__item">
                        <button class="chi-accordion__trigger">
                          <div class="chi-accordion__title">Item 1.1</div>
                          <i
                            class="chi-icon icon-chevron-down"
                            aria-hidden="true"
                          ></i>
                        </button>
                        <div class="chi-accordion__content">
                          <a href="#exampleHashTarget">
                            <span>Item 1.1.1</span>
                          </a>
                          <a href="#exampleHashTarget">
                            <span>Item 1.1.2</span>
                          </a>
                        </div>
                      </div>
                      <div class="chi-accordion__item">
                        <button class="chi-accordion__trigger">
                          <div class="chi-accordion__title">Item 1.2</div>
                          <i
                            class="chi-icon icon-chevron-down"
                            aria-hidden="true"
                          ></i>
                        </button>
                        <div class="chi-accordion__content">
                          <a href="#exampleHashTarget">
                            <span>Item 1.2.1</span>
                          </a>
                          <a href="#exampleHashTarget">
                            <span>Item 1.2.2</span>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="chi-accordion__item -active -expanded">
                  <button class="chi-accordion__trigger">
                    <div class="chi-accordion__title">Item 2</div>
                    <i
                      class="chi-icon icon-chevron-down"
                      aria-hidden="true"
                    ></i>
                  </button>
                  <div class="chi-accordion__content">
                    <div class="chi-accordion">
                      <div class="chi-accordion__item">
                        <button class="chi-accordion__trigger">
                          <div class="chi-accordion__title">Item 2.1</div>
                          <i
                            class="chi-icon icon-chevron-down"
                            aria-hidden="true"
                          ></i>
                        </button>
                        <div class="chi-accordion__content">
                          <a href="#exampleHashTarget">
                            <span>Item 2.1.1</span>
                          </a>
                          <a href="#exampleHashTarget">
                            <span>Item 2.1.2</span>
                          </a>
                        </div>
                      </div>
                      <div class="chi-accordion__item -active -expanded">
                        <button class="chi-accordion__trigger">
                          <div class="chi-accordion__title">Item 2.2</div>
                          <i
                            class="chi-icon icon-chevron-down"
                            aria-hidden="true"
                          ></i>
                        </button>
                        <div class="chi-accordion__content">
                          <a href="#exampleHashTarget">
                            <span>Item 2.2.1</span>
                          </a>
                          <a class="-active" href="#exampleHashTarget">
                            <span>Item 2.2.2</span>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <a href="#exampleHashTarget">
                  <span>
                    External
                    <i
                      class="chi-icon icon-external-link -xs"
                      aria-hidden="true"
                    ></i>
                  </span>
                </a>
              </div>
            </div>
          </div>
          <div
            class="chi-drawer -right -position--absolute"
            id="second-level-2"
          >
            <div class="chi-drawer__header chi-mobile-nav__header">
              <button
                class="chi-button -flat -icon -no-hover -back"
                aria-label="Back"
              >
                <div class="chi-button__content">
                  <i class="chi-icon icon-chevron-left" aria-hidden="true"></i>
                </div>
              </button>
              <div class="chi-mobile-nav__header-title">Inventory</div>
              <button class="chi-button -icon -close" aria-label="Close">
                <div class="chi-button__content">
                  <i class="chi-icon icon-x" aria-hidden="true"></i>
                </div>
              </button>
            </div>
            <div class="chi-drawer__content chi-mobile-nav__content">
              <div class="chi-accordion">
                <div class="chi-accordion__item">
                  <button class="chi-accordion__trigger">
                    <div class="chi-accordion__title">Item 1</div>
                    <i
                      class="chi-icon icon-chevron-down"
                      aria-hidden="true"
                    ></i>
                  </button>
                  <div class="chi-accordion__content">
                    <div class="chi-accordion">
                      <div class="chi-accordion__item">
                        <button class="chi-accordion__trigger">
                          <div class="chi-accordion__title">Item 1.1</div>
                          <i
                            class="chi-icon icon-chevron-down"
                            aria-hidden="true"
                          ></i>
                        </button>
                        <div class="chi-accordion__content">
                          <a href="#exampleHashTarget">
                            <span>Item 1.1.1</span>
                          </a>
                          <a href="#exampleHashTarget">
                            <span>Item 1.1.2</span>
                          </a>
                        </div>
                      </div>
                      <div class="chi-accordion__item">
                        <button class="chi-accordion__trigger">
                          <div class="chi-accordion__title">Item 1.2</div>
                          <i
                            class="chi-icon icon-chevron-down"
                            aria-hidden="true"
                          ></i>
                        </button>
                        <div class="chi-accordion__content">
                          <a href="#exampleHashTarget">
                            <span>Item 1.2.1</span>
                          </a>
                          <a href="#exampleHashTarget">
                            <span>Item 1.2.2</span>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="chi-accordion__item">
                  <button class="chi-accordion__trigger">
                    <div class="chi-accordion__title">Item 2</div>
                    <i
                      class="chi-icon icon-chevron-down"
                      aria-hidden="true"
                    ></i>
                  </button>
                  <div class="chi-accordion__content">
                    <div class="chi-accordion">
                      <div class="chi-accordion__item">
                        <button class="chi-accordion__trigger">
                          <div class="chi-accordion__title">Item 2.1</div>
                          <i
                            class="chi-icon icon-chevron-down"
                            aria-hidden="true"
                          ></i>
                        </button>
                        <div class="chi-accordion__content">
                          <a href="#exampleHashTarget">
                            <span>Item 2.1.1</span>
                          </a>
                          <a href="#exampleHashTarget">
                            <span>Item 2.1.2</span>
                          </a>
                        </div>
                      </div>
                      <div class="chi-accordion__item">
                        <button class="chi-accordion__trigger">
                          <div class="chi-accordion__title">Item 2.2</div>
                          <i
                            class="chi-icon icon-chevron-down"
                            aria-hidden="true"
                          ></i>
                        </button>
                        <div class="chi-accordion__content">
                          <a href="#exampleHashTarget">
                            <span>Item 2.2.1</span>
                          </a>
                          <a href="#exampleHashTarget">
                            <span>Item 2.2.2</span>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <a href="#exampleHashTarget">
                  <span>
                    External
                    <i
                      class="chi-icon icon-external-link -xs"
                      aria-hidden="true"
                    ></i>
                  </span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- JavaScript -->
<script>
  chi.mobilenav(document.querySelector("#mobile-navigation-interaction-trigger"));
</script>

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon