Sidebar

Sidebars are vertical navigation menus fixed to the left. They can be used to display branding, navigation links, buttons, forms, and any other content, making them a vital component for most dashboards and other product pages.

Before we begin

Here's a list of things to understand about sidebars in Halfmoon.

  • Sidebars are fixed to the left of the page by default, and only one can be used per page.
  • Sidebars must be the immediate child of the page wrapper (.page-wrapper). You can learn more about this in the page building section (opens in new tab) of the docs.
  • When sidebars are used, the page wrapper (.page-wrapper) must be given the .with-sidebar class. This automatically adjusts all the other content in the page to accomodate the sidebar. Moreover, without this class, the sidebar will not be displayed.

With all that said, given below is an example of a sidebar.

fake-logo Brand
Press / to focus
Getting started
Installation CLI commands
Components
File explorer Spreadsheet Map Messenger

Page title

Card title 

<body>
  <!-- Page wrapper with .with-sidebar class -->
  <div class="page-wrapper with-sidebar">
    <!-- Sidebar (immediate child of the page wrapper) -->
    <div class="sidebar">
      <div class="sidebar-menu">
        <!-- Sidebar brand -->
        <a href="#" class="sidebar-brand">
          <img src="..." alt="...">
          Brand
        </a>
        <!-- Sidebar content with the search box -->
        <div class="sidebar-content">
          <input type="text" class="form-control" placeholder="Search">
          <div class="mt-10 font-size-12"> <!-- mt-10 = margin-top: 1rem (10px), font-size-12 = font-size: 1.2rem (12px) -->
            Press <kbd>/</kbd> to focus
          </div>
        </div>
        <!-- Sidebar links and titles -->
        <h5 class="sidebar-title">Getting started</h5>
        <div class="sidebar-divider"></div>
        <a href="#" class="sidebar-link active">Installation</a>
        <a href="#" class="sidebar-link">CLI commands</a>
        <br />
        <h5 class="sidebar-title">Components</h5>
        <div class="sidebar-divider"></div>
        <a href="#" class="sidebar-link">File explorer</a>
        <a href="#" class="sidebar-link">Spreadsheet</a>
        <a href="#" class="sidebar-link">Map</a>
        <a href="#" class="sidebar-link">Messenger</a>
      </div>
    </div>

    <!-- Content wrapper -->
    <div class="content-wrapper">
      ...
    </div>
  </div>
</body>

The following makes up the content inside the sidebar:

  • .sidebar-menu — the main container for all the other content. Adds a nice bit of margin on the top and bottom.
  • .sidebar-brand — can be used for branding. The branding supports images as well, as can be seen above.
  • .sidebar-title — can be used to create titles for the sidebar menu, to show different sections.
  • .sidebar-link — can be used for the main links. The link with the class .active will have a different style, showing that it is indeed the active one.
  • .sidebar-divider — can be used to create dividers, by adding the class to a <div> element.
  • .sidebar-content — can be used on containers for other content, such as inputs, buttons, forms, and so on. This provides spacing to match with the title, links and dividers.
  • You can also use <br /> tags or utility classes to separate links into different sections.

Customizing sidebar icons #

Sidebar icons can be easily customized using utility classes to set the text color, background color, border radius, and also the flex properties (since the icons are using flexbox). The following example shows customized sidebar icons.

General
Calculator News reader
Productivity
Docs Sheets Email Slides

Page title

Card title 

<div class="sidebar">
  <div class="sidebar-menu">
    <h5 class="sidebar-title">General</h5>
    <div class="sidebar-divider"></div>
    <a href="#" class="sidebar-link sidebar-link-with-icon">
      <span class="sidebar-icon bg-transparent justify-content-start mr-0"> <!-- bg-transparent = background-color: transparent, justify-content-start = justify-content: flex-start, mr-0 = margin-right: 0 -->
        <i class="fa fa-calculator" aria-hidden="true"></i>
      </span>
      Calculator
    </a>
    <a href="#" class="sidebar-link sidebar-link-with-icon">
      <span class="sidebar-icon bg-transparent justify-content-start mr-0"> <!-- bg-transparent = background-color: transparent, justify-content-start = justify-content: flex-start, mr-0 = margin-right: 0 -->
        <i class="fa fa-newspaper-o" aria-hidden="true"></i>
      </span>
      News reader
    </a>
    <br />
    <h5 class="sidebar-title">Productivity</h5>
    <div class="sidebar-divider"></div>
    <a href="#" class="sidebar-link sidebar-link-with-icon">
      <span class="sidebar-icon bg-primary text-white rounded-circle"> <!-- bg-primary = background-color: var(--primary-color), text-white = color: white, rounded-circle = border-radius: 50% --> 
        <i class="fa fa-file-word-o" aria-hidden="true"></i>
      </span>
      Docs
    </a>
    <a href="#" class="sidebar-link sidebar-link-with-icon">
      <span class="sidebar-icon bg-success text-dark rounded-circle"> <!-- bg-success = background-color: var(--success-color), text-dark = color: var(--lm-base-text-color), rounded-circle = border-radius: 50% -->
        <i class="fa fa-file-excel-o" aria-hidden="true"></i>
      </span>
      Sheets
    </a>
    <a href="#" class="sidebar-link sidebar-link-with-icon">
      <span class="sidebar-icon bg-secondary text-dark rounded-circle"> <!-- bg-secondary = background-color: var(--secondary-color), text-dark = color: var(--lm-base-text-color), rounded-circle = border-radius: 50% -->
        <i class="fa fa-envelope-o" aria-hidden="true"></i>
      </span>
      Email
    </a>
    <a href="#" class="sidebar-link sidebar-link-with-icon">
      <span class="sidebar-icon bg-danger text-white rounded-circle"> <!-- bg-danger = background-color: var(--danger-color), text-white = color: white, rounded-circle = border-radius: 50% -->
        <i class="fa fa-file-powerpoint-o" aria-hidden="true"></i>
      </span>
      Slides
    </a>
  </div>
</div>

Toggling sidebar # (Requires JavaScript)

Sidebars are hidden when the data-sidebar-hidden="hidden" attribute is present on the page wrapper (.page-wrapper). Therefore, toggling the sidebar is simply just adding/removing this attribute to/from the page wrapper. To do this, you can use the built-in halfmoon.toggleSidebar() method that comes with the core JavaScript library (opens in new tab). 

<!-- Toggle sidebar -->
<button class="btn" type="button" onclick="halfmoon.toggleSidebar()">Toggle sidebar</button>

<!-- Requires halfmoon.js -->
<script src="path/to/halfmoon.js"></script>

Default #

As mentioned above, by default, sidebars will make space for the navbars on top and bottom and stay adjacent to the content wrapper. This is the type of sidebar that will be created if the data-sidebar-type="{type}" attribute is not present on the page wrapper.

The above example is loaded in an iFrame, so a few things may look out of place depending on your browser settings and screen size. Open it in a new tab 
<body>
  <!-- Page wrapper with default sidebar -->
  <div class="page-wrapper with-navbar with-sidebar with-navbar-fixed-bottom">
    <!-- Navbar -->
    <nav class="navbar">
      ...
    </nav>
    <!-- Default sidebar -->
    <div class="sidebar">
      ...
    </div>
    <!-- Content wrapper -->
    <div class="content-wrapper">
      ...
    </div>
    <!-- Navbar fixed bottom -->
    <nav class="navbar navbar-fixed-bottom">
      ...
    </nav>
  </div>

  <!-- Requires halfmoon.js for toggling sidebar -->
  <script src="path/to/halfmoon.js"></script>
</body>

Full height #

Full height sidebars will take up the full height of the page and be adjacent to the navbars on top and bottom, and also the content wrapper. They can be created by adding the data-sidebar-type="full-height" attribute to the page wrapper.

The above example is loaded in an iFrame, so a few things may look out of place depending on your browser settings and screen size. Open it in a new tab 
<body>
  <!-- Page wrapper with full height sidebar -->
  <div 
    class="page-wrapper with-navbar with-sidebar with-navbar-fixed-bottom" 
    data-sidebar-type="full-height">
    <!-- Navbar -->
    <nav class="navbar">
      ...
    </nav>
    <!-- Full height sidebar -->
    <div class="sidebar">
      ...
    </div>
    <!-- Content wrapper -->
    <div class="content-wrapper">
      ...
    </div>
    <!-- Navbar fixed bottom -->
    <nav class="navbar navbar-fixed-bottom">
      ...
    </nav>
  </div>

  <!-- Requires halfmoon.js for toggling sidebar -->
  <script src="path/to/halfmoon.js"></script>
</body>

Overlayed #

Overlayed sidebars float on top of the page when they are open. They can be created by adding the data-sidebar-type="overlayed-all" attribute to the page wrapper. In the example below, try clicking on the button in the navbar to open the sidebar.

The above example is loaded in an iFrame, so a few things may look out of place depending on your browser settings and screen size. Open it in a new tab 
<body>
  <!-- Page wrapper with overlayed sidebar -->
  <div
    class="page-wrapper with-navbar with-sidebar with-navbar-fixed-bottom" 
    data-sidebar-type="overlayed-all">
    <!-- Sidebar overlay -->
    <div class="sidebar-overlay" onclick="halfmoon.toggleSidebar()"></div>

    <!-- Navbar -->
    <nav class="navbar">
      ...
    </nav>
    <!-- Overlayed sidebar -->
    <div class="sidebar">
      ...
    </div>
    <!-- Content wrapper -->
    <div class="content-wrapper">
      ...
    </div>
    <!-- Navbar fixed bottom -->
    <nav class="navbar navbar-fixed-bottom">
      ...
    </nav>
  </div>

  <!-- Requires halfmoon.js for toggling sidebar -->
  <script src="path/to/halfmoon.js"></script>
</body>

Please note that for overlayed sidebars, the overlay element (.sidebar-overlay) has to be added manually to the DOM inside the page wrapper. It is also a good idea to trigger the halfmoon.toggleSidebar() method when the overlay is clicked, so that the sidebar can be closed by clicking on the overlay, since the overlay is only visible when the sidebar is open. The easiest way to do this is by simply setting the method to the onclick="..." attribute, as shown above.

Overlayed only on small screens and down #

You can also have sidebars which are overlayed only on small screens and below (screen width <= 768px). This can be done by adding the data-sidebar-type="overlayed-sm-and-down" attribute to the page wrapper.

The above example is loaded in an iFrame, so a few things may look out of place depending on your browser settings and screen size. Open it in a new tab 
<body>
  <!-- Page wrapper with overlayed (only on small screens and down) sidebar -->
  <div
    class="page-wrapper with-navbar with-sidebar with-navbar-fixed-bottom" 
    data-sidebar-type="overlayed-sm-and-down">
    <!-- Sidebar overlay -->
    <div class="sidebar-overlay" onclick="halfmoon.toggleSidebar()"></div>
    
    <!-- Navbar -->
    <nav class="navbar">
      ...
    </nav>
    <!-- Overlayed (only on small screens and down) sidebar -->
    <div class="sidebar">
      ...
    </div>
    <!-- Content wrapper -->
    <div class="content-wrapper">
      ...
    </div>
    <!-- Navbar fixed bottom -->
    <nav class="navbar navbar-fixed-bottom">
      ...
    </nav>
  </div>

  <!-- Requires halfmoon.js for toggling sidebar -->
  <script src="path/to/halfmoon.js"></script>
</body>

Once again, the overlay element (.sidebar-overlay) has to be added manually to the DOM inside the page wrapper, as can be seen above.

Composite #

Sidebar types can also be combined together to create composite sidebars. The only one available as of right now is a sidebar that is overlayed on small screens and below (screen width <= 768px), and full height otherwise. This can be created by adding the data-sidebar-type="full-height overlayed-sm-and-down" attribute to the page wrapper.

The above example is loaded in an iFrame, so a few things may look out of place depending on your browser settings and screen size. Open it in a new tab 
<body>
  <!-- Page wrapper with composite sidebar -->
  <div
    class="page-wrapper with-navbar with-sidebar with-navbar-fixed-bottom" 
    data-sidebar-type="full-height overlayed-sm-and-down">
    <!-- Sidebar overlay -->
    <div class="sidebar-overlay" onclick="halfmoon.toggleSidebar()"></div>
    
    <!-- Navbar -->
    <nav class="navbar">
      ...
    </nav>
    <!-- Sidebar that is overlayed on small screens and down, and full height otherwise -->
    <div class="sidebar">
      ...
    </div>
    <!-- Content wrapper -->
    <div class="content-wrapper">
      ...
    </div>
    <!-- Navbar fixed bottom -->
    <nav class="navbar navbar-fixed-bottom">
      ...
    </nav>
  </div>

  <!-- Requires halfmoon.js for toggling sidebar -->
  <script src="path/to/halfmoon.js"></script>
</body>

And once again, the overlay element (.sidebar-overlay) has to be added manually to the DOM inside the page wrapper, as can be seen above.

Responsive behavior # (Requires JavaScript)

When the sidebar type is set to "overlayed-all", the sidebar is initially hidden when the DOM is loaded on all screen sizes.

On small screens and below (screen width <= 768px), all types of sidebars are initially hidden when the DOM is loaded. You can turn off this behavior by adding the data-show-sidebar-onload-sm-and-down="..." attribute to the page wrapper (.page-wrapper). This will make sure that sidebars are not hidden initially when the DOM is loaded (on small screens and below).

Shortcut for toggling sidebar # (Requires JavaScript)

There is also a built-in shortcut which lets users toggle the sidebar by pressing shift + S on the keyboard. This can be enabled by adding the data-sidebar-shortcut-enabled="..." attribute to the DOM's <body>. You can read more about this in the core JavaScript library section (opens in new tab) of the documentation.

Up next: Buttons
On this page
Sidebar Sidebar links with icons Customizing sidebar icons Toggling sidebar Sidebar types Default Full height Overlayed Overlayed only on small screens and down Composite Responsive behavior Shortcut for toggling sidebar

Help us grow

Our goal is to make Halfmoon the go-to framework for building dashboards and tools on the web. We are already working on things like a form validator, number input, datepicker, multi-select (think Select2 without jQuery), tabs component, JSX docs, and so much more. You can learn more in the project roadmap.

However, we need your help to grow. So if you truly believe in our goal, please consider supporting us through Patreon.

Gold sponsor

The following is the highest tier, with a maximum of 1 sponsor.
(Also seen at the top of the page)

Sponsors

The following is the normal tier, with a maximum of 10 sponsors.

Backers

The following people have generously decided to support Halfmoon.

Subscribe for updates


  • We will notify you when the framework gets a substantial update. No spam or marketing.
  • You can also follow us on Twitter and stay updated that way.
halfmoon-logo halfmoon-logo-white

Get in touch

Legal

Made with for developers

Scroll to top
© Copyright 2025, Halfmoon UI