Tab

Ready Added in 2.0.0

Create a tabbed navigation with different styles.

Usage

The tab component consists of clickable tabs, that are aligned side by side in a list. Its JavaScript functionality extends the Switcher component and is necessary to dynamically transition through different contents using the tabbed navigation.

Class/Attribute Description
gls-tab Add this attribute to a <ul> element to define the Tab component. Use <a> elements as tab items within the list.
.gls-active Add this class to a list item to apply an active state.
.gls-disabled Add this class to a list item to apply a disabled state. Also remove the href attribute from the anchor to make it inaccessible through keyboard navigation. 
<ul gls-tab>
    <li class="gls-active"><a href=""></a></li>
    <li><a href=""></a></li>
    <li class="gls-disabled"><a></a></li>
</ul>

  • <ul gls-tab>
    <li class="gls-active"><a href="#">Left</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li class="gls-disabled"><a>Disabled</a></li>
</ul>

Guidelines

When to use

  • Displaying a small number (2-5 categories) of closely related, distinct data
  • Displaying multiple unique views of the same data
  • Category labels are short and easy to understand
  • Switching between views is common for your users’ goals
  • Category names are unlikely to change very often and number of categories is unlikely to grow

When to consider something else

  • Displaying six or more categories (or more than what will easily fit horizontally on your target users' screen)
  • Displaying categories that require long labels for clarity
  • Users will frequently need to compare data from different tabs/categories
  • The data for each tab could just as easily function as its own page
  • If you are tempted to include a ‘More’ tab
  • If the amount of data that would be shown on each tab is small

Implementation notes

  • Do not stack rows of tabs - only use a small set of tabs in a single row
  • Order tabs in a logical manner
  • Default tab (on page load) should be the first tab. The first tab should be the most frequently viewed or most important tab.
  • Tab order should stay the same as the user moves between tabs
  • Label tabs with clear concise categories - 1-2 words is ideal
  • Do not use all capital letters in the tab labels
  • Do not include a ‘More’ tab
  • Page should not reload or refresh when the user switches to a different tab
  • Only the content of the tab and tab bar indicating the user’s location should change. The rest of the page should remain the same.

Bottom modifier

Add the .gls-tab-bottom class to flip tab items to the bottom.

<ul class="gls-tab-bottom" gls-tab>...</ul>

  • <ul class="gls-tab-bottom" gls-tab>
    <li class="gls-active"><a href="#">Left</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

Left/Right modifiers

Add the .gls-tab-left or .gls-tab-right class to align tabs vertically to the left or right side. To save space, the alignment automatically switches back to horizontal when the viewport width goes below 960px.

When using the vertical alignment, you will usually create a grid to apply the layout as seen in the Switcher example.

<ul class="gls-tab-left" gls-tab>...</ul>

<ul class="gls-tab-right" gls-tab>...</ul>

  • <div class="gls-child-width-1-2@s" gls-grid>
    <div>
        <ul class="gls-tab-left" gls-tab>
            <li class="gls-active"><a href="#">Left</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>

    <div>
        <ul class="gls-tab-right" gls-tab>
            <li class="gls-active"><a href="#">Right</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>
</div>

Responsive

To change the default breakpoint between the vertical and horizontal alignment, just apply the media option to the attribute with the appropriate viewport width. Add a number in pixel, for example media: 640, or a breakpoint, for example media: @m.

<ul class="gls-tab-left" gls-tab="media: @s">...</ul>

Alignment

You can combine tabs with the Flex component or the Width component to modify the alignment of the navigations.

<ul class="gls-flex-right" gls-tab>...</ul>

  • <div class="gls-margin-medium-top">
    <ul class="gls-flex-center" gls-tab>
        <li class="gls-active"><a href="#">Center</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

<div>
    <ul class="gls-flex-right" gls-tab>
        <li class="gls-active"><a href="#">Right</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

<div>
    <ul class="gls-child-width-expand" gls-tab>
        <li class="gls-active"><a href="#">Justify</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

Tabs and Dropdown

Tabs can be used to trigger a dropdown menu from the Dropdown component.

<ul gls-tab>
    <li>

        <!-- This is the menu item toggling the dropdown -->
        <a href=""></a>

        <!-- This is the dropdown -->
        <div gls-dropdown="mode: click">
            <ul class="gls-nav gls-dropdown-nav">...</ul>
        </div>

    </li>
</ul>

  • <ul gls-tab>
    <li class="gls-active"><a href="#">Active</a></li>
    <li><a href="#">Item</a></li>
    <li>
        <a href="#">More <span gls-icon="icon: triangle-down"></span></a>
        <div gls-dropdown="mode: click">
            <ul class="gls-nav gls-dropdown-nav">
                <li class="gls-active"><a href="#">Active</a></li>
                <li><a href="#">Item</a></li>
                <li class="gls-nav-header">Header</li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li class="gls-nav-divider"></li>
                <li><a href="#">Item</a></li>
            </ul>
        </div>
    </li>
</ul>

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

Option Value Default Description
connect CSS selector false Related item’s container. By default, this is the next element with the ‘gls-switcher’ class.
toggle CSS selector > * The toggle selector, which triggers content switching on click.
active Number 0 Active index on init. Providing a negative number indicates a position starting from the end of the set.
animation String false The space separated names of animations to use. Comma separate for animation out.
duration Number 200 The animation duration.
swiping Boolean true Use swiping.
media Number, String 960 When to switch to horizontal mode - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl) or any valid media query (e.g. (min-width: 900px)).

JavaScript

Learn more about JavaScript components.

Initialization

Gloss.tab(element, options);

Events

The following events will be triggered on the connected items of the elements with this component attached:

Name Description
beforeshow Fires before an item is shown. Can prevent showing by calling preventDefault() on the event.
show Fires after an item is shown.
shown Fires after the item’s show animation has completed.
beforehide Fires before an item is hidden. Can prevent hiding by calling preventDefault() on the event.
hide Fires after an item’s hide animation has started.
hidden Fires after an item is hidden.

Methods

The following methods are available for the component:

Show

Gloss.tab(element).show(index);

Shows the Tab item with given index.

Name Type Default Description
index String, Number, Node 0 Tab item to show. 0 based index.