#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.

#Basics

Below is a basic example of a header.

Structure

• 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.

<div class="header header-fixed u-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 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="fab fa-wrapper fa-github" aria-hidden="true"></i>
                    </span>
                </a>
            </div>
            <div class="nav-item text-center">
                <a href="#">
                    <span class="icon">
                        <i class="fab fa-wrapper fa-slack" aria-hidden="true"></i>
                    </span>
                </a>
            </div>
            <div class="nav-item text-center">
                <a href="#">
                    <span class="icon">
                        <i class="fab fa-wrapper fa-twitter" aria-hidden="true"></i>
                    </span>
                </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>

        <div class="nav-right">
            <div class="nav-item active">
                <a href="#">Active</a>
            </div>
            <div class="nav-item">
                <a href="#">Link 1</a>
            </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>
                    <li class="dropdown-menu-divider"></li>
                    <li role="menu-item"><a href="#">Fourth Item</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

#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 screen sizes.The area used by header-btn is indicated in light pink.

<div class="header-brand">
    <div class="nav-item nav-btn" style="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 u-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="fab fa-wrapper 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" style="background-color: #ffdadd;" id="header-menu">
        <!-- 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');
});

#Nav Regions

The nav regions or the nav-left, nav-center, and nav-right classes denote the different regions in the nav-bar. The children of these classes will align based on their class suffix (elements in nav-left will be left aligned and items in nav-right will be right aligned). The containers by themselves will take up all the remaining space in the header-nav, but will space out evenly with the addition of more regions.

Note that this only shows for > 768px.

Only 1 region present (nav-left).

Only 2 regions present (nav-left and nav-right).

All regions present (nav-left, nav-center and nav-right).

Nav Left

This will display contents on the left side of the header-nav and items are left aligned.

Nav Center

This will display contents on the center of the header-nav and items are centered.
Note that this will not appear directly in the center if the header-brand has elements.

Nav Right

This will display contents on the right side of the header-nav and items are right aligned.

#Nav Item

The nav-item class is the fundamental component that serves as the parent container to all the other elements inside these components:

• header-brand
• header-nav
• dropdown-menu
• nav-left
• nav-right

Elements such as links, paragraphs, inputs, and other controls can be placed inside. Below are some examples in code.

A header-brand logo.

<div class="nav-item">
    <img src="./logo.png" />
</div>

A link.

<div class="nav-item">
    <a href="#">Link</a>
</div>

The dropdown menu toggle.

<div class="nav-item has-sub" id="dropdown">
    <a class="nav-dropdown-link">
        <span class="icon">
            <i class="fa fa-wrapper fa-book" aria-hidden="true"></i>
        </span> 
        Docs
    </a>
</div>

Or any other elements.

<div class="nav-item has-sub">
    <input type="text" />
    <button class="btn-accent">Hello</button>
    <button class="btn-accent">World</button>
</div>

Cirrus provides flexibility for which type of elements you can use for your nav-item elements which can be declared as either <div> or <a>.

States

nav-items have 3 basic states: normal (no selector), :hover, and active. To disable any hover effect, just add no-hover to the nav-item.

#Nav Dropdown

The dropdown-menu allows you to display a drpdown menu from a nav-item that displays additional options. This is simply a nav-item that has an has-sub class attached to it to indicate that this contains a dropdown menu with additional options. On desktops > 768px, the dropdown menu appears as a regular menu item and the menu portion displays below the nav-item. On mobile devices, it just expands the nav-item it is in. The user clicks this toggle and the dropdown-menu will appear based on its previous state. The whole implementation is really broken down into two parts:

1) The Dropdown Toggle

Inside the nav-item has-sub element, the main toggle of the component will be handled by an anchor tag with the nav-dropdown-link class. Inside this control, icons and text can be added to specify the contents of the menu. When the dropdown menu is shown, the active class will be added to the nav-item has-sub element (the parent).

<div class="nav-item has-sub">
    <a class="nav-dropdown-link">
        <span class="icon"><i class="fa fa-wrapper fa-book"></i></span> 
    Docs</a>
</div>

2) The Menu Itself

The menu itself will be adjacent to the nav-dropdown-link and is a ul with the dropdown-menu class. Addition modifers include:

• dropdown-animated - adds animation when the menu is shown and hidden.
• dropdown-dark - adds a dark theme to the dropdown menu.
• dropdown-shown - shows the dropdown menu.

Embedded inside the dropdown-menu ul, li is used to denote the list items. Within the list items, any component can also be added.

Putting the two elements together, we can get a dropdown menu structure that looks something like this:

<div class="nav-item has-sub">
    <a class="nav-dropdown-link">
        Me
    </a>
    <ul class="dropdown-menu dropdown-animated" role="menu">
        <li role="menu-item"><a>About</a></li>
        <li role="menu-item"><a>Achievements</a></li>
        <li role="menu-item"><a>Likes</a></li>
    </ul>
</div>

JavaScript (jQuery)

With JavaScript, the cleanest solution relies on jQuery. Below is a snippet that should work for general implementations of the dropdown-menu, but may require slight modification depending on the design of the website.

$('.has-sub').on('click', function(e) { // Get all dropdown menu toggles
    $('.dropdown-menu').not($(this).children('.dropdown-menu')).removeClass('dropdown-shown'); // Hide all other dropdown menus
    $('.has-sub').not($(this)).removeClass('active'); // Remove the active selector from the other dropdown toggles
    $(this).children('.dropdown-menu').toggleClass('dropdown-shown'); // Show/hide the dropdown menu associated with the toggle being clicked
    $(this).toggleClass('active'); // Toggle the active selector on the nav-item
});

CSS-only Toggle

If JavaScript is not an option in showing the menu, Cirrus now provides a hover toggle to show and hide the dropdown-menu with only CSS. To do so, the toggle-hover class needs to be added to the nav-item has-sub element. That is all.

<div class="nav-item has-sub toggle-hover">
    <a class="nav-dropdown-link">
        Menu
    </a>
    <ul class="dropdown-menu dropdown-animated" role="menu">
        <li role="menu-item"><a>Profile</a></li>
        <li role="menu-item"><a>Messages</a></li>
        <li role="menu-item"><a>Log Out</a></li>
    </ul>
</div>

Positioning

Customizing the positioning of the dropdown-menu is very simple. By default, Cirrus will automatically align and position them depending if it is inside a nav-left, nav-center, or nav-right. Menus in the left navigation menu are left aligned, menus in the center are centered, and menus on the right are right aligned. This ensures that the menus do not go past the screens.

Dropdown Divider

The dropdown-menu-divider allows you to separate dropdown menu items to provide clearer organization. This class could be added to a list item, div, or hr and it would display the same.

<li class="dropdown-menu-divider"></li>
<!-- OR -->
<div class="dropdown-menu-divider"></div>
<!-- OR -->
<hr class="dropdown-menu-divider"></div>

#Static Headers

By default, headers in Cirrus are not fixed to the top of the screen, but to the top of the page. To create a static header, simply add the header-fixed selector to the header to make it stick to the top of the screen.

A normal header.

A fixed 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: #495057
• 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: #ffffff
• Link Color: #ffffff
• Background Color: rgba(0, 0, 0, 0.87)

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.

• Text Color: #ffffff
• Link Color: #ffffff
• Background Color: transparent