Cirrus

#Tabs

Simple tab navigation for presenting different views with different styles and add-ons.

#Basic

These are tabs with the base styling out of the box.

  • Home
  • Group
  • Shop
  • Me
Structure
  • tab-container - holds all the tabs.
    • li - represents each tab item.
      • tab-item-content or a - contents of tab item. Use tab-item-content class div when creating tab functionality with JS, use a with links.
<div class="tab-container">
    <ul>
        <li><div class="tab-item-content">Home</div></li>
        <li><div class="tab-item-content">Group</div></li>
        <li><div class="tab-item-content">Shop</div></li>
        <li class="selected"><div class="tab-item-content">Me</div></li>
    </ul>
</div>
To clarify the choice of being able to use a a or tab-item-content div above, it means:
  • If you were to navigate to another page on a tab item click, it would make sense to use a.
  • For all other cases, it would make sense to use tab-item-content div to follow HTML specifications.

To highlight or select any of the elements, add the selected class to the tab item (li).

#Sizes

Modify the size of the tab-container using the tabs--xs, tabs--sm, tabs--lg, and tabs--xl classes.

Extra Small

  • Home
  • Group
  • Shop
  • Me
<div class="tab-container tabs--xs">
    <ul>
        <!-- Tab Items -->
    </ul>
</div>

Small

  • Home
  • Group
  • Shop
  • Me
<div class="tab-container tabs--sm">
    <ul>
        <!-- Tab Items -->
    </ul>
</div>

Large

  • Home
  • Group
  • Shop
  • Me
<div class="tab-container tabs--lg">
    <ul>
        <!-- Tab Items -->
    </ul>
</div>

Extra Large

  • Home
  • Group
  • Shop
  • Me
<div class="tab-container tabs--xl">
    <ul>
        <!-- Tab Items -->
    </ul>
</div>

#Alignment

Easily change the alignment on the tabs with tabs--center, tabs--right, and tabs-fill. Note that tabs are left-justified by default.

Left

New
0.7.0
  • Home
  • Group
  • Shop
  • Me
<div class="tab-container tabs--center">
    <ul>
        <!-- Tab Items -->
    </ul>
</div>

Centered

  • Home
  • Group
  • Shop
  • Me
<div class="tab-container tabs--center">
    <ul>
        <!-- Tab Items -->
    </ul>
</div>

Right

  • Home
  • Group
  • Shop
  • Me
<div class="tab-container tabs--right">
    <ul>
        <!-- Tab Items -->
    </ul>
</div>

Fill

  • Home
  • Group
  • Shop
  • Me
<div class="tab-container tabs-fill">
    <ul>
        <!-- Tab Items -->
    </ul>
</div>

#Styles

Try out alternative styles with tabs.

Depth

  • Home
  • Group
  • Shop
  • Me
<div class="tab-container tabs-depth tabs-fill">
    <ul>
        <!-- Tab Items -->
    </ul>
</div>

Classic

  • Home
  • Group
  • Shop
  • Me
<div class="tab-container tabs-classic tabs--center">
    <ul>
        <!-- Tab Items -->
    </ul>
</div>

#Glyphs

Integrate FontAwesome glyphs into your tabs. Cirrus will automatically align the glyphs to the left or right depending if the glyph or text comes first.

Classic

<div class="tab-container tabs-classic tabs--center">
    <ul>
        <li><a><span class="icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-left" class="u-inline-block fa-chevron-left fa-wrapper" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z" data-darkreader-inline-fill="" style="--darkreader-inline-fill:currentColor;"></path></svg></span><span>Back</span></a></li>
        <li class="selected">
            <div class="tab-item-content"><span class="icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="home" class="u-inline-block fa-home fa-w-18 fa-wrapper" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z" data-darkreader-inline-fill="" style="--darkreader-inline-fill:currentColor;"></path></svg></span><span>Home</span></div>
        </li>
        <li>
            <div class="tab-item-content"><span>Forward</span><span class="icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-right" class="u-inline-block fa-chevron-right fa-wrapper" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z" data-darkreader-inline-fill="" style="--darkreader-inline-fill:currentColor;"></path></svg></span></div>
        </li>
    </ul>
</div>