npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

sidebar-style-guide

v2.0.0

Published

Sidebar navigation style guide (CSS and Sass)

Downloads

651

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

lazabogdanlazabogdan

Keywords

Readme

sidebar-style-guide

npm version

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