Pro Sidebar Template

Responsive layout with advanced sidebar menu built with SCSS and vanilla Javascript
Alternatives To Pro Sidebar Template
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Hamburgers6,83831760a month ago20March 15, 202231mitSCSS
Tasty CSS-animated Hamburgers
Pro Sidebar Template822
9 days ago2mitHTML
Responsive layout with advanced sidebar menu built with SCSS and vanilla Javascript
Figma Plugin Ds44927 months ago18May 16, 202118mitSCSS
A small lightweight design system for use in Figma Plugins
Hugo Theme M10c365
2 months ago8mitHTML
A minimalistic (m10c) blog theme for Hugo
Tale Hugo246
5 months ago8mitSCSS
A port of the Tale theme for Hugo. Tale is a minimal theme curated for storytellers.
Angular Pro Sidebar196
3 months ago33mitTypeScript
Responsive sidebar template with dropdown menu built with angular 7 and bootstrap 4
Hugo Theme Techdoc161
9 days ago28mitSCSS
The Techdoc is a Hugo Theme for technical documentation.
Quickmenu134
2 years ago13May 25, 2021mitSCSS
The new era of mobile navigation for the web, we're out of hamburgers.
Slide Menu113
a year ago11December 26, 201921mitTypeScript
A multilevel page menu with a smooth slide effect
After Dark105
6 days ago12mitSCSS
A dark theme for Zola
Alternatives To Pro Sidebar Template
Select To Compare


Alternative Project Comparisons
Readme

Pro sidebar template

Responsive layout with advanced sidebar menu built with SCSS and vanilla Javascript

Demo

See it live

Screenshot

Pro Sidebar

Installation

# clone the repo
$ git clone https://github.com/azouaoui-med/pro-sidebar-template.git my-project

# go into app's directory
$ cd my-project

# install app's dependencies
$ yarn install

Usage

# serve with hot reload at localhost:8080
$ yarn start

# build app for production
$ yarn build

Documentation

Layout

The layout for this template is based on css pro layout package, please refer to the docs for more information

Sidebar

Responsive navigation element for building vertical menu items

Sidebar Image

Adding background image requires adding .has-bg-image class to sidebar component, and the image needs to be inside .image-wrapper component

<aside id="sidebar" class="sidebar break-point-lg has-bg-image">
  <div class="image-wrapper">
    <img src="assets/images/sidebar-bg.jpg" alt="sidebar background" />
  </div>
  <div class="sidebar-layout">
    <!-- Content here -->
  </div>
</aside>

Sidebar Layout

Sidebar comes with layout support for better organization of the inner structure

<aside id="sidebar" class="sidebar break-point-lg">
  <div class="sidebar-layout">
    <div class="sidebar-header">
      <!-- Header content here -->
    </div>
    <div class="sidebar-content">
      <!-- Content here -->
    </div>
    <div class="sidebar-footer">
      <!-- Footer content here -->
    </div>
  </div>
</aside>

More on the sidebar here

Menu

Wrapper component that groups all menu items

<nav class="menu">
  <!-- Content here -->
</nav>

Open current submenu

Use .open-current-submenu to enable opening only one submenu component at a time

<nav class="menu open-current-submenu">
  <!-- Content here -->
</nav>

Icon shape

A set of classes are provided to restyle menu icons

  • .icon-shape-square
  • .icon-shape-rounded
  • .icon-shape-circle
<nav class="menu icon-shape-circle">
  <!-- Content here -->
</nav>

Menu Item

Building menu item requires having .menu-item class in the wrapper and .menu-title for the text

<nav class="menu">
  <ul>
    <li class="menu-item">
      <a href="#">
        <span class="menu-title">menu text</span>
      </a>
    </li>
    <!-- More menu items -->
  </ul>
</nav>

Menu Icon

Use .menu-icon to add an icon to menu items

<nav class="menu">
  <ul>
    <li class="menu-item">
      <a href="#">
        <span class="menu-icon">
          <i class="ri-service-fill"></i>
        </span>
        <span class="menu-title">menu text</span>
      </a>
    </li>
    <!-- More menu items -->
  </ul>
</nav>

Prefix & Suffix

Menu item also supports having prefix and suffix components

<nav class="menu">
  <ul>
    <li class="menu-item">
      <a href="#">
        <span class="menu-icon">
          <i class="ri-service-fill"></i>
        </span>
        <span class="menu-prefix">prefix</span>
        <span class="menu-title">menu text</span>
        <span class="menu-suffix">suffix</span>
      </a>
    </li>
    <!-- More menu items -->
  </ul>
</nav>

Sub Menu

Add .sub-menu class to menu item and create a wrapper component with sub-menu-list class to group sub menu items

Its possible to have unlimited nesting menu items

<nav class="menu">
  <ul>
    <li class="menu-item sub-menu">
      <a href="#">
        <span class="menu-title">menu text</span>
      </a>
      <div class="sub-menu-list">
        <li class="menu-item">
          <a href="#">
            <span class="menu-title">sub menu text</span>
          </a>
        </li>
        <!-- More sub menu items -->
      </div>
    </li>
    <!-- More menu items -->
  </ul>
</nav>

Open default

Use .open class to have sub menu expanded by default

<nav class="menu">
  <ul>
    <li class="menu-item sub-menu open">
      <a href="#">
        <span class="menu-title">menu text</span>
      </a>
      <div class="sub-menu-list">
        <li class="menu-item">
          <a href="#">
            <span class="menu-title">sub menu text</span>
          </a>
        </li>
        <!-- More sub menu items -->
      </div>
    </li>
    <!-- More menu items -->
  </ul>
</nav>

Customization

Update SCSS variables in src/styles/_variables.scss to customize the template

$text-color: #b3b8d4;
$secondary-text-color: #dee2ec;
$bg-color: #0c1e35;
$secondary-bg-color: #0b1a2c;
$border-color: rgba(#535d7d, 0.3);
$sidebar-header-height: 64px;
$sidebar-footer-height: 64px;

License

This code is released under the MIT license.

Popular Scss Projects
Popular Menu Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Javascript
Html
Css
Angular
Bootstrap
Scss
Layout
Menu
Responsive
Sidebar
Scrollbar