Header

Cirrus makes designing the perfect header extremely simple. It is designed to be as flexible and responsive as a header menu could be with automatic element hiding for different screen sizes as well as support for dropdown menus. The basic outline for the header menu can be seen below.

<div class="header header-fixed unselectable header-animated">
    <div class="header-brand">
        <div class="nav-item no-hover">
            <h6 class="title">Logo</h6>
        </div>
        <div class="nav-item nav-btn" id="header-btn">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <div class="header-nav" id="header-menu">
        <div class="nav-left">
            <div class="nav-item text-center">
                <a href="#">
                    <span class="icon">
                        <i class="fa fa-github" aria-hidden="true"></i>
                    </span>
                </a>
            </div>
            <div class="nav-item text-center">
                <a href="#">
                    <span class="icon">
                        <i class="fa fa-slack" aria-hidden="true"></i>
                    </span>
                </a>
            </div>
            <div class="nav-item text-center">
                <a href="#">
                    <span class="icon">
                        <i class="fa fa-twitter" aria-hidden="true"></i>
                    </span>
                </a>
            </div>
            <div class="nav-item has-sub toggle-hover" id="dropdown">
                <a class="nav-dropdown-link">DropDown</a>
                <ul class="dropdown-menu" role="menu">
                    <li role="menu-item"><a href="#">First Item</a></li>
                    <li role="menu-item"><a href="#">Second Item</a></li>
                    <li role="menu-item"><a href="#">Third Item</a></li>
                </ul>
            </div>
        </div>
        
        <div class="nav-right">
            <div class="nav-item selected">
                <a href="#">Selected</a>
            </div>
            <div class="nav-item">
                <a href="#">Link 1</a>
            </div>
            
            <div class="nav-item has-sub toggle-hover" id="dropdown">
                <a class="nav-dropdown-link">Animated</a>
                <ul class="dropdown-menu dropdown-animated" role="menu">
                    <li role="menu-item"><a href="#">First Item</a></li>
                    <li role="menu-item"><a href="#">Second Item</a></li>
                    <li role="menu-item"><a href="#">Third Item</a></li>
                </ul>
            </div>
            <div class="nav-item has-sub" id="dropdown">
                <a class="nav-dropdown-link">Click Me</a>
                <ul class="dropdown-menu" role="menu">
                    <li role="menu-item"><a href="#">First Item</a></li>
                    <li role="menu-item"><a href="#">Second Item</a></li>
                    <li role="menu-item"><a href="#">Third Item</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
Header Outline
  • header will serve as the parent container for the header component.
    • header-brand is the left most container of the header with the website logo always showing. Extra links can be added here if needed.
    • header-nav is designed for adding links, dropdown menus, and other components. The components are hidden for tablets and phones and are rendered in a main dropdown menu that can be accessed by the hamburger button.
      • nav-left is the left most container of the header-nav that will display components like links, buttons, etc on the left side of the screen and the top part of the menu on touch enabled devices.
        • nav-item serves as the main container for all components of any nav-* container. Slight padding is added into the control. Adding the has-sub class indicates that the item has a dropdown menu.
          • nav-dropdown-link specifies that the link inside the nav-item is associated to an adjacent dropdown-menu.
          • dropdown-menu is the dropdown menu (ul) itself that can contain li or any other elements.
            • dropdown-menu-divider is a divider used to separate dropdown-menu components.

Header Brand

The header-brand serves as the part of the header menu that showcases your website brand, logo, etc. It is positioned in the left most part of the header and is always visible on any screen size. However, the header-nav will fill the width of the parent container for touch enabled devices (<= 768px) but will only take up the space it needs for larger devices (> 768px).

<div class="header">
    <div class="header-brand">
        <!-- Insert other nav-items -->
    </div>
</div>

The header-brand can also contain other controls other than just your website name. For instance, it can hold buttons, links, textviews, and other controls. The area used by header-brand is indicated in light pink.

Note that the header-brand should always have the nav-btn as a way for touch enabled devices to access the header-nav.

Another thing to note is that the first-child of the header-brand will have an extra padding of 1rem in the left and right designed especially for logo placement.

Header Button

The header-btn is used to style a div or button as a hamburger button that will show a dropdown menu when clicked. This only appears for touch enabled devices (<= 768px) and is automatically hidden for larger scree sizes. The area used by header-btn is indicated in light pink.

<div class="header-brand">
    <div class="nav-item nav-btn" style="background-color: #ffdadd; cursor: pointer; display: block; position: relative; margin-left: auto;">
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>

To set the header-btn to the close state (when the dropdown menu is present, simply add the active class to the button.

Header Nav

The header-nav is the adjacent container of the header-brand that holds dropdown menus, links, buttons, and other components. Unlike the header-brand, the header-nav is hidden on touch enabled devices (<= 768px) and is only shown as a dropdown menu of the header menu. For larger devices, the header-nav fills the remaining space in the header. The area used by header-nav is indicated in light pink.

<div class="header header-fixed unselectable header-animated">
    <div class="header-brand">
        <div class="nav-item no-hover">
            <a><h6 class="title">Logo</h6></a>
        </div>
        <div class="nav-item">
            <a href="#">
                <span class="icon">
                    <i class="fa fa-github"></i>
                </span>
            </a>
        </div>
        <div class="nav-item nav-btn" id="header-btn">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <div class="header-nav">
        <!-- Other nav categories, controls, nav-items, etc. This is hidden on touch enabled devices -->
    </div>
</div>

Since that header-nav fills up the rest of the space for devices with widths larger than 768px, Cirrus provides different layouts to place elements within the container itself using nav-left, nav-center, and nav-right directly as children.

JavaScript Toggle

Keep in mind that the script used to toggle the menus is not included in Cirrus and it is best to develop a custom one that fits your site. Below is a sample of what can fit in any site running Cirrus.

Plain JavaScript
// Get all the nav-btns in the page
let navBtns = document.querySelectorAll('.nav-btn');

// Add an event handler for all nav-btns to enable the dropdown functionality
navBtns.forEach(function (ele) {
    ele.addEventListener('click', function() {
        // Get the dropdown-menu associated with this nav button (insert the id of your menu)
        let dropDownMenu = document.getElementById('MENU_ID_HERE');

        // Toggle the nav-btn and the dropdown menu
        ele.classList.toggle('active');
        dropDownMenu.classList.toggle('active');
    });
});
JQuery
// Show dropdown when clicked
$('#header-btn').on('click', function(e) {
    $('#MENU_ID_HERE').toggleClass('active');
    $('.nav-btn').toggleClass('active');
});

// Hide menu after clicking menu item
$('.dropdown-menu li').on('click', function(e) {
     $('#MENU_ID_HERE').removeClass('active');
     $('.nav-btn').removeClass('active');
});

Header Themes

When it comes to header themes, Cirrus's design language also applies to this component. Below are some predefined header styles.

Default

By default, the header is designed with a white background with a drop shadow. Text elements have the default text color of the framework (#374054) and links have the default link color of the framework (#8292a2).

  • Text Color: #374054
  • Link Color: #8292a2
  • Background Color: #ffffff
Dark

The dark theme for the header bar adds a bold look to the overall webpage which contrasts well with websites with bright colors while matching websites with darker colors. The design blends well with other designs with a lower opacity than the default theme to allow for some translucency.

  • Text Color: #fff
  • Link Color: #fff
  • Background Color: transparent
Clear

The clear theme is based on the default theme, but with a few minor changes. The background is transparent instead of white, the box-shadow is removed, and the dropdown-menu is rounded on all sides.