Navbar

A responsive horizontal navbar that can support logos, links, buttons, and dropdowns

Basic Navbar

To get started quickly, here is what a complete basic navbar looks like:

Simple header 

  

    
      Simple header

Other Navigations

Astral.CSS navigation supports bg-primary,bg-dark and bg-info background-color utility classes.

Alignment

Direction

Tabs

Pills

Offcanvas

Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom edge of the viewport. Buttons are used as triggers that are attached to specific elements you toggle, and data attributes are used to invoke our JavaScript.

Live Demo

Use the buttons below to show and hide an offcanvas element via JavaScript that toggles the .show class on an element with the .offcanvas class.

  • .offcanvas hides content (default)
  • .offcanvas.show shows content

You can use a button with the data-as-offcanvas attribute.The data-as-offcanvas="yourUniqueID1" is required.

Offcanvas
Content for the offcanvas goes here. You can place just about any Astral.CSS component or custom elements here.
Offcanvas footer
Offcanvas
Content for the offcanvas goes here. You can place just about any Astral.CSS component or custom elements here.
Offcanvas footer
Offcanvas
Content for the offcanvas goes here. You can place just about any Astral.CSS component or custom elements here.
Offcanvas footer
Offcanvas
Content for the offcanvas goes here. You can place just about any Astral.CSS component or custom elements here.
Offcanvas footer

  
  
  
  
  

    

      
Offcanvas

      
    

    

      Content for the offcanvas goes here. You can place just about any Astral.CSS component or custom elements here.
    

    

      
Offcanvas footer

    
  
  

    


    

      
Offcanvas

      
    

    

      Content for the offcanvas goes here. You can place just about any Astral.CSS component or custom elements here.
    

    

      
Offcanvas footer

    

 

    


    

      
Offcanvas

      
    

    

      Content for the offcanvas goes here. You can place just about any Astral.CSS component or custom elements here.
    

    

      
Offcanvas footer

    



    


    

      
Offcanvas

      
    

    

      Content for the offcanvas goes here. You can place just about any Astral.CSS component or custom elements here.
    

    

      
Offcanvas footer

Offcanvas Navbars

Resize the viewport to see this in action!