Find me on GitHub
Breadcrumbs Button Buttongroup Caption Checkbox Datepicker Definition-list Expandable Footer Icons Infochip Inputfield List Loading Media Navbar Pagination Progressbar Progresscircle Radiobutton Select Sidebar Slider Subnav Switch Table Table-expandable Tabs Tag Textarea Tile

Sidebar

In groundhog since v0.1.1

Examples


<nav class="sidebar">
  <a href="#noop" class="sidebar__item is-current">
    <span class="sidebar__headline">General</span>
    <span class="sidebar__info">See your Application setup</span>
  </a>
  <a href="#noop" class="sidebar__item">
    <span class="sidebar__headline">User actions</span>
    <span class="sidebar__info">See your application setup</span>
  </a>
</nav>

    

<nav class="sidebar">
  <div class="expandable is-current is-active">
    <a href="#noop" class="sidebar__item expandable__trigger expandable__trigger--right">
      <span class="sidebar__headline">Monitoring</span>
      <span class="sidebar__info">Setup and overview</span>
    </a>
    <div class="expandable__content">
      <a href="#noop" class="sidebar__item is-current">
        <span class="sidebar__headline">General</span>
      </a>
      <a href="#noop" class="sidebar__item">
        <span class="sidebar__headline">User actions</span>
      </a>
    </div>
  </div>
  <div class="expandable">
    <a href="#noop" class="sidebar__item expandable__trigger expandable__trigger--right">
      <span class="sidebar__headline">Web monitoring</span>
      <span class="sidebar__info">Global settings and configuration</span>
    </a>
    <div class="expandable__content">
      <a href="#noop" class="sidebar__item">
        <span class="sidebar__headline">General</span>
      </a>
      <a href="#noop" class="sidebar__item">
        <span class="sidebar__headline">User actions</span>
      </a>
    </div>
  </div>
  <div class="expandable">
    <a href="#noop" class="sidebar__item expandable__trigger expandable__trigger--right">
      <span class="sidebar__headline">User actions</span>
      <span class="sidebar__info">See your application setup</span>
    </a>
    <div class="expandable__content">
      <a href="#noop" class="sidebar__item">
        <span class="sidebar__headline">General</span>
      </a>
      <a href="#noop" class="sidebar__item">
        <span class="sidebar__headline">User actions</span>
      </a>
    </div>
  </div>
</nav>

Introduction

The Groundhog sidebar component component introduces a possibility of creating an additional navigation. A sidebar is typically used to link navigational elements on the same level as the current page.

Including the sidebar component

  1. To create a Groundhog sidebar, first create the <div>, <a> (anchor) and <span> elements in the following structure:
    <div>
<a href="#">
 <span></span>
</a>
<a href="#">
 <span></span>
</a>
</div>
  2. To apply the visual styles of Groundhog, add the necessary classes to the class attribute of the elements.
    <div class="sidebar">
<a class="sidebar__item" href="#">
 <span class="sidebar__headline"></span>
</a>
<a class="sidebar__item" href="#">
 <span class="sidebar__headline"></span>
</a>
</div>
  3. Each sidebar item can hold a headline and an optional info text:
    <div class="sidebar">
<a class="sidebar__item" href="#">
 <span class="sidebar__headline"></span>
 <span class="sidebar__info"></span>
</a>
<a class="sidebar__item" href="#">
 <span class="sidebar__headline"></span>
</a>
</div>

Create an expandable sidebar

To use expandable in the sidebar, wrap the sidebar__item in an expandable module like this:

<div class="expandable is-current">
  <a href="#" class="sidebar__item expandable__trigger expandable__trigger--right">
    <span class="sidebar__headline">Monitoring</span>
    <span class="sidebar__info">Setup and overview</span>
  </a>
  <div class="expandable__content">
    <a href="#" class="sidebar__item is-current">
      <span class="sidebar__headline">General</span>
    </a>
    <a href="#" class="sidebar__item">
      <span class="sidebar__headline">User actions</span>
    </a>
  </div>
</div>

States

state name effect
.is-current Highlights the currently selected menu item. This class must be set on the sidebar__item and the expandable container of this item.
.is-active Expands the expandable__content area of the sidebar menu.

For more details about the expandable component, go the the expandable section of the Groundhog documentation

A note to expandable sidebars

The expandable sidebars need the expandable module to be included. To make sure the cascade doesn't overwrite properties, the expandable module has to be first.

You don't have to care about that if you use the complete framework.