Sidebar-style-guide NPM

sidebar-style-guide

A style guide (CSS and Sass) providing a convenient base for styling common sidebar/drawer elements like menus, brand, etc.

This package complements the drawer component from material-design-kit.

Installation

Install sidebar-style-guide via npm.

npm install sidebar-style-guide

Usage

// Customize variables
$sidebar-font-size: 16px !default;

@import 'node_modules/sidebar-style-guide/sass/variables';
@import 'node_modules/sidebar-style-guide/sass/style';

Sidebar skins

There are two base skin variants that you get out of the box for making a sidebar with a light background color and dark text color or a sidebar with dark background color and light text color.

Note that none of the skin classes include a background color, so the following example assumes you are adding the background with additional custom classes (i.e .bg-primary and .bg-white from Bootstrap).

<!-- .sidebar-light -->
<div class="sidebar-light bg-white">
  ... 
</div>

<!-- .sidebar-dark -->
<div class="sidebar-dark bg-primary">
  ... 
</div>

Sidebar position

Note that the positioning classes don't actually change your sidebar's position, but they can add styling which depends on the sidebar position. For example, when the sidebar is positioned to the left, you could apply a border to the right of the sidebar, separating the page content from the sidebar with a line.

<div class="sidebar-light bg-white sidebar-left">
  ... 
</div>

Sidebar menu

To create a basic sidebar menu:

add ul wrapper using the .sidebar-menu class
add li menu items using the .sidebar-menu-item class
add a menu buttons use the .sidebar-menu-button class
add the .active class to .sidebar-menu-item elements

<!-- Basic sidebar menu -->
<ul class="sidebar-menu">

  <!-- Active menu item -->
  <li class="sidebar-menu-item active">
    <a href="#" class="sidebar-menu-button">Active menu item</a>
  </li>

  <!-- Regular menu item -->
  <li class="sidebar-menu-item">
    <a href="#" class="sidebar-menu-button">Regular menu item</a>
  </li>

</ul>

You can customize sidebar menus with the following Sass variables.

Spacing

.sidebar-menu-button

Sidebar menu icons

Add icons to sidebar menus.

Dependencies

The following example is using Material icons, so make sure to load the icons library into the <head> section of your page before using the example.

<!-- Material Design Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Usage

To add an icon to the sidebar menu button, add an element using the .sidebar-menu-icon base icon class within the .sidebar-menu-button element. Also, to use the Material icons add the .material-icons class to the .sidebar-menu-icon element.

<!-- Sidebar menu icons -->
<ul class="sidebar-menu">
  <li class="sidebar-menu-item">
    <a class="sidebar-menu-button" href="#">
      <i class="sidebar-menu-icon sidebar-menu-icon--left material-icons">home</i> 
      Menu button text
    </a>
  </li>
</ul>

You can customize sidebar menu icons with the following Sass variables.

See also
Sidebar menu icons in the context of sidebar submenus.

Sidebar menu utilities

You can modify the style of sidebar menus and sidebar submenus by using CSS helper classes. All the following classes should be applied on .sidebar-menu and .sidebar-submenu elements.

You can customize sidebar utilities with the following Sass variables.

.sm-condensed

.sm-bordered

.sm-item-bordered

.sm-active-button-bg

.sm-active-button-bg and .sm-icons-block

Dependencies

The following example is using Material icons, so make sure to load the icons library into the <head> section of your page before using the example.

<!-- Material Design Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Usage

<!-- Sidebar menu style modifiers -->
<ul class="sidebar-menu sm-active-button-bg sm-bordered">
  <li class="sidebar-menu-item">
    <a class="sidebar-menu-button" href="#">
      <i class="sidebar-menu-icon sidebar-menu-icon--left material-icons">home</i> 
      Menu button
    </a>
  </li>
  <li class="sidebar-menu-item active">
    <a class="sidebar-menu-button" href="#">
      <i class="sidebar-menu-icon sidebar-menu-icon--left material-icons">menu</i> 
      Another button
    </a>
  </li>
</ul>

Sidebar submenu

Usage

To create a basic sidebar submenu:

add ul wrapper using the .sidebar-submenu class, after a .sidebar-menu-button element
add li submenu items using the .sidebar-menu-item class
add a submenu buttons using the .sidebar-menu-button class
add the .open class to the parent .sidebar-menu-item element to display a submenu
add the optional .sidebar-menu-toggle-icon indicator element to the top level toggle button

<!-- Sidebar menu -->
<ul class="sidebar-menu">

  <!-- Open menu item -->
  <li class="sidebar-menu-item open">
    <a href="#" class="sidebar-menu-button">
      Dashboard
      <span class="sidebar-menu-toggle-icon ml-auto"></span>
    </a>

    <!-- Submenu -->
    <ul class="sidebar-submenu">
      <li class="sidebar-menu-item active">
        <a href="#" class="sidebar-menu-button">Active menu item</a>
      </li>
      <li class="sidebar-menu-item">
        <a href="#" class="sidebar-menu-button">Regular menu item</a>
      </li>
    </ul>
  </li>

  <!-- Menu item -->
  <li class="sidebar-menu-item">
    <a href="#" class="sidebar-menu-button">
      Reports
      <span class="sidebar-menu-toggle-icon ml-auto"></span>
    </a>

    <!-- Submenu -->
    <ul class="sidebar-submenu">
      <li class="sidebar-menu-item">
        <a href="#" class="sidebar-menu-button">Another menu item</a>
      </li>
      <li class="sidebar-menu-item">
        <a href="#" class="sidebar-menu-button">Regular menu item</a>
      </li>
    </ul>
  </li>

</ul>

You can customize sidebar submenus with the following Sass variables.

.sidebar-menu-button

.sidebar-menu-icon

@infinitebrahmanuniverse/nolb-sid @everything-registry/sub-chunk-2757

8 years ago

8 years ago

9 years ago

9 years ago

9 years ago

9 years ago