#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" role="button">
        <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="left-dropdown">
                <a class="nav-dropdown-link">Animated</a>
                <ul class="dropdown-menu dropdown-animated" role="menu">
                    <li role="menuitem"><a href="#">First Item</a></li>
                    <li role="menuitem"><a href="#">Second Item</a></li>
                    <li role="menuitem"><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="right-dropdown">
                <a class="nav-dropdown-link">Click Me</a>
                <ul class="dropdown-menu" role="menu">
                    <li role="menuitem"><a href="#">First Item</a></li>
                    <li role="menuitem"><a href="#">Second Item</a></li>
                    <li role="menuitem"><a href="#">Third Item</a></li>
                    <li class="dropdown-menu-divider"></li>
                    <li role="menuitem"><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.

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

#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 text-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 text-white, the box-shadow is removed, and the dropdown-menu is rounded on all sides.

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