NetApp logo
LUCI Version 4.0.0

Tabs

Tabs organize content and allow navigation between groups of content that are related and at the same level of hierarchy. Each tab contains content that is distinct from the other tabs in a set.

Example

Tabs consist of a tab container and a tab label. Tabs may also include information that augments the understanding of the tab’s content, such a count or status indicator. There is no limit on the number of tabs in a set, but LUCI recommends 2-6 tabs as optimal.

Copied to clipboard 
<div class="luci-tab">
    <div class="luci-tab__nav">
        <ul class="luci-tab__list" role="tablist">
            <li class="luci-tab__list-item luci-tab__list-item--is-active" role="presentation">
                <a class="luci-link" href="#active" role="tab" id="active" aria-controls="active"> Active </a>
            </li>
            <li class="luci-tab__list-item " role="presentation">
                <a class="luci-link" href="#default1" role="tab" id="default1" aria-controls="default1"> Default </a>
            </li>
            <li class="luci-tab__list-item " role="presentation">
                <a class="luci-link" href="#default2" role="tab" id="default2" aria-controls="default2"> Default </a>
            </li>
            <li class="luci-tab__list-item " role="presentation">
                <a class="luci-link" href="#default3" role="tab" id="default3" aria-controls="default3"> Default </a>
            </li>
            <li class="luci-tab__list-item " role="presentation">
                <a class="luci-link" href="#default4" role="tab" id="default4" aria-controls="default4"> Default </a>
            </li>
        </ul>
    </div>
    <div class="luci-tab__content">
        <div class="luci-tab__panel luci-tab__panel--is-active" id="active" role="tabpanel" aria-labeledby="active">
        </div>
        <div class="luci-tab__panel " id="default1" role="tabpanel" aria-labeledby="default1">
        </div>
        <div class="luci-tab__panel " id="default2" role="tabpanel" aria-labeledby="default2">
        </div>
        <div class="luci-tab__panel " id="default3" role="tabpanel" aria-labeledby="default3">
        </div>
        <div class="luci-tab__panel " id="default4" role="tabpanel" aria-labeledby="default4">
        </div>
    </div>
</div>

Do's and Don'ts

Do

  • Keep tab labels short, ideally a single word.
  • Have a minimum of 2 tabs.
  • Use to alternate between views within the same context.

Don’t

  • Use when users need to compare information or see the information that is behind different tabs at the same time.
  • Use to navigate between pages or between drastically different types of content.
  • Use to move through sequential content that needs to be done in a particular order.
  • Have multiple tab sets on the same page.
  • Use as primary navigation within a web site or application. Use the navigation component instead.

Basic tabs

On white background
On light background
On dark background
Copied to clipboard 
<div class="luci-tab">
    <div class="luci-tab__nav">
        <ul class="luci-tab__list" role="tablist">
            <li class="luci-tab__list-item luci-tab__list-item--is-active" role="presentation">
                <a class="luci-link" href="#active1" role="tab" id="active1" aria-controls="active1"> Active </a>
            </li>
            <li class="luci-tab__list-item " role="presentation">
                <a class="luci-link" href="#default5" role="tab" id="default5" aria-controls="default5"> Default </a>
            </li>
            <li class="luci-tab__list-item " role="presentation">
                <a class="luci-link" href="#default6" role="tab" id="default6" aria-controls="default6"> Default </a>
            </li>
            <li class="luci-tab__list-item " role="presentation">
                <a class="luci-link" href="#default7" role="tab" id="default7" aria-controls="default7"> Default </a>
            </li>
            <li class="luci-tab__list-item " role="presentation">
                <a class="luci-link" href="#default8" role="tab" id="default8" aria-controls="default8"> Default </a>
            </li>
        </ul>
    </div>
    <div class="luci-tab__content">
        <div class="luci-tab__panel luci-tab__panel--is-active" id="active1" role="tabpanel" aria-labeledby="active1">
        </div>
        <div class="luci-tab__panel " id="default5" role="tabpanel" aria-labeledby="default5">
        </div>
        <div class="luci-tab__panel " id="default6" role="tabpanel" aria-labeledby="default6">
        </div>
        <div class="luci-tab__panel " id="default7" role="tabpanel" aria-labeledby="default7">
        </div>
        <div class="luci-tab__panel " id="default8" role="tabpanel" aria-labeledby="default8">
        </div>
    </div>
</div>

Tabs with count

Tabs can include a count if the count augments the understanding of the tab’s content. For example, if each tab contains different views of a data set and the number of items in each set is pertinent information to the user’s task.

Copied to clipboard 
<div class="luci-tab">
    <div class="luci-tab__nav">
        <ul class="luci-tab__list" role="tablist">
            <li class="luci-tab__list-item luci-tab__list-item--is-active" role="presentation">
                <a class="luci-link" href="#panel1b" role="tab" id="panel1b" aria-controls="panel1b"> Documents (10) </a>
            </li>
            <li class="luci-tab__list-item " role="presentation">
                <a class="luci-link" href="#panel2b" role="tab" id="panel2b" aria-controls="panel2b"> Tab Count (5) </a>
            </li>
            <li class="luci-tab__list-item " role="presentation">
                <a class="luci-link" href="#panel3b" role="tab" id="panel3b" aria-controls="panel3b"> Tab Count (4) </a>
            </li>
            <li class="luci-tab__list-item " role="presentation">
                <a class="luci-link" href="#panel4b" role="tab" id="panel4b" aria-controls="panel4b"> Tab Count (3) </a>
            </li>
            <li class="luci-tab__list-item " role="presentation">
                <a class="luci-link" href="#panel5b" role="tab" id="panel5b" aria-controls="panel5b"> Tab Count (2) </a>
            </li>
        </ul>
    </div>
    <div class="luci-tab__content">
        <div class="luci-tab__panel luci-tab__panel--is-active" id="panel1b" role="tabpanel" aria-labeledby="panel1b">
        </div>
        <div class="luci-tab__panel " id="panel2b" role="tabpanel" aria-labeledby="panel2b">
        </div>
        <div class="luci-tab__panel " id="panel3b" role="tabpanel" aria-labeledby="panel3b">
        </div>
        <div class="luci-tab__panel " id="panel4b" role="tabpanel" aria-labeledby="panel4b">
        </div>
        <div class="luci-tab__panel " id="panel5b" role="tabpanel" aria-labeledby="panel5b">
        </div>
    </div>
</div>

Tabs with status

Tabs can include a status indicator if the indicator augments the understanding of the tab’s content. For example, if each tab contains different views of a data set and you need to alert the user that one or more of the views contains errors or success.

Copied to clipboard 
<div class="luci-tab luci-tab--with-icons">
    <div class="luci-tab__nav">
        <ul class="luci-tab__list" role="tablist">
            <li class="luci-tab__list-item luci-tab__list-item--is-active" role="presentation">
                <svg class="luci-icon luci-icon--warning luci-icon--size-sm luci-icon--left" aria-hidden="true">
                    <use xlink:href="/icons/luci.svg#warning">
                    </use>
                </svg>
                <a class="luci-link" href="#panel1e" role="tab" id="panel1e" aria-controls="panel1e"> Active </a>
            </li>
            <li class="luci-tab__list-item " role="presentation">
                <a class="luci-link" href="#panel2e" role="tab" id="panel2e" aria-controls="panel2e"> Default </a>
            </li>
            <li class="luci-tab__list-item " role="presentation">
                <a class="luci-link" href="#panel3e" role="tab" id="panel3e" aria-controls="panel3e"> Default </a>
            </li>
            <li class="luci-tab__list-item " role="presentation">
                <a class="luci-link" href="#panel4e" role="tab" id="panel4e" aria-controls="panel4e"> Default </a>
            </li>
            <li class="luci-tab__list-item " role="presentation">
                <a class="luci-link" href="#panel5e" role="tab" id="panel5e" aria-controls="panel5e"> Default </a>
            </li>
        </ul>
    </div>
    <div class="luci-tab__content">
        <div class="luci-tab__panel luci-tab__panel--is-active" id="panel1e" role="tabpanel" aria-labeledby="panel1e">
        </div>
        <div class="luci-tab__panel " id="panel2e" role="tabpanel" aria-labeledby="panel2e">
        </div>
        <div class="luci-tab__panel " id="panel3e" role="tabpanel" aria-labeledby="panel3e">
        </div>
        <div class="luci-tab__panel " id="panel4e" role="tabpanel" aria-labeledby="panel4e">
        </div>
        <div class="luci-tab__panel " id="panel5e" role="tabpanel" aria-labeledby="panel5e">
        </div>
    </div>
</div>

Nested Tabs

Tabs can be nested. Expose the nested tabs when a primary tab is selected. Do not nest more than one level of tabs.

Content from panel2h.

On white background

Content from panel2h.

On light background

Content from panel2h.

On dark background
Copied to clipboard 
<div class="luci-tab">
    <div class="luci-tab__nav">
        <ul class="luci-tab__list" role="tablist">
            <li class="luci-tab__list-item luci-tab__list-item--is-active" role="presentation">
                <a class="luci-link" href="#panel1h" role="tab" id="panel1h" aria-controls="panel1h"> Active </a>
            </li>
            <li class="luci-tab__list-item " role="presentation">
                <a class="luci-link" href="#panel2h" role="tab" id="panel2h" aria-controls="panel2h"> Default </a>
            </li>
            <li class="luci-tab__list-item " role="presentation">
                <a class="luci-link" href="#panel3h" role="tab" id="panel3h" aria-controls="panel3h"> Default </a>
            </li>
            <li class="luci-tab__list-item " role="presentation">
                <a class="luci-link" href="#panel4h" role="tab" id="panel4h" aria-controls="panel4h"> Default </a>
            </li>
            <li class="luci-tab__list-item " role="presentation">
                <a class="luci-link" href="#panel5h" role="tab" id="panel5h" aria-controls="panel5h"> Default </a>
            </li>
        </ul>
    </div>
    <div class="luci-tab__content">
        <div class="luci-tab__panel luci-tab__panel--is-active" id="panel1h" role="tabpanel" aria-labeledby="panel1h">
            <ul class="luci-tab__list luci-tab__list--nested">
                <li class="luci-tab__list-item luci-tab__list-item--is-active">
                    <a class="luci-link" href="#system-health" role="tab" id="system-health" aria-controls="system-health"> System Health </a>
                </li>
                <li class="luci-tab__list-item ">
                    <a class="luci-link" href="#capacity" role="tab" id="capacity" aria-controls="capacity"> Capacity </a>
                </li>
                <li class="luci-tab__list-item ">
                    <a class="luci-link" href="#hover" role="tab" id="hover" aria-controls="hover"> Hover </a>
                </li>
                <li class="luci-tab__list-item ">
                    <a class="luci-link" href="#efficiency" role="tab" id="efficiency" aria-controls="efficiency"> Efficiency </a>
                </li>
            </ul>
            <div class="luci-tab__panel--nested luci-tab__panel--is-active" id="system-health" role="tabpanel" aria-labeledby="system-health">
            </div>
            <div class="luci-tab__panel--nested " id="capacity" role="tabpanel" aria-labeledby="capacity">
            </div>
            <div class="luci-tab__panel--nested " id="hover" role="tabpanel" aria-labeledby="hover">
            </div>
            <div class="luci-tab__panel--nested " id="efficiency" role="tabpanel" aria-labeledby="efficiency">
            </div>
        </div>
        <div class="luci-tab__panel " id="panel2h" role="tabpanel" aria-labeledby="panel2h">
            <ul class="luci-tab__list luci-tab__list--nested">
                <li class="luci-tab__list-item luci-tab__list-item--is-active">
                    <a class="luci-link" href="#system-health-2" role="tab" id="system-health-2" aria-controls="system-health-2"> System Health </a>
                </li>
                <li class="luci-tab__list-item ">
                    <a class="luci-link" href="#capacity-2" role="tab" id="capacity-2" aria-controls="capacity-2"> Capacity </a>
                </li>
                <li class="luci-tab__list-item ">
                    <a class="luci-link" href="#hover-2" role="tab" id="hover-2" aria-controls="hover-2"> Hover </a>
                </li>
                <li class="luci-tab__list-item ">
                    <a class="luci-link" href="#efficiency-2" role="tab" id="efficiency-2" aria-controls="efficiency-2"> Efficiency </a>
                </li>
            </ul>
            <div class="luci-tab__panel--nested luci-tab__panel--is-active" id="system-health-2" role="tabpanel" aria-labeledby="system-health-2">
                <p>Content from panel2h.</p>
            </div>
            <div class="luci-tab__panel--nested " id="capacity-2" role="tabpanel" aria-labeledby="capacity-2">
            </div>
            <div class="luci-tab__panel--nested " id="hover-2" role="tabpanel" aria-labeledby="hover-2">
            </div>
            <div class="luci-tab__panel--nested " id="efficiency-2" role="tabpanel" aria-labeledby="efficiency-2">
            </div>
        </div>
        <div class="luci-tab__panel " id="panel3h" role="tabpanel" aria-labeledby="panel3h">
            <ul class="luci-tab__list luci-tab__list--nested">
                <li class="luci-tab__list-item luci-tab__list-item--is-active">
                    <a class="luci-link" href="#system-health-3" role="tab" id="system-health-3" aria-controls="system-health-3"> System Health </a>
                </li>
                <li class="luci-tab__list-item ">
                    <a class="luci-link" href="#capacity-3" role="tab" id="capacity-3" aria-controls="capacity-3"> Capacity </a>
                </li>
                <li class="luci-tab__list-item ">
                    <a class="luci-link" href="#hover-3" role="tab" id="hover-3" aria-controls="hover-3"> Hover </a>
                </li>
                <li class="luci-tab__list-item ">
                    <a class="luci-link" href="#efficiency-3" role="tab" id="efficiency-3" aria-controls="efficiency-3"> Efficiency </a>
                </li>
            </ul>
            <div class="luci-tab__panel--nested luci-tab__panel--is-active" id="system-health-3" role="tabpanel" aria-labeledby="system-health-3">
            </div>
            <div class="luci-tab__panel--nested " id="capacity-3" role="tabpanel" aria-labeledby="capacity-3">
            </div>
            <div class="luci-tab__panel--nested " id="hover-3" role="tabpanel" aria-labeledby="hover-3">
            </div>
            <div class="luci-tab__panel--nested " id="efficiency-3" role="tabpanel" aria-labeledby="efficiency-3">
            </div>
        </div>
        <div class="luci-tab__panel " id="panel4h" role="tabpanel" aria-labeledby="panel4h">
            <ul class="luci-tab__list luci-tab__list--nested">
                <li class="luci-tab__list-item luci-tab__list-item--is-active">
                    <a class="luci-link" href="#system-health-4" role="tab" id="system-health-4" aria-controls="system-health-4"> System Health </a>
                </li>
                <li class="luci-tab__list-item ">
                    <a class="luci-link" href="#capacity-4" role="tab" id="capacity-4" aria-controls="capacity-4"> Capacity </a>
                </li>
                <li class="luci-tab__list-item ">
                    <a class="luci-link" href="#hover-4" role="tab" id="hover-4" aria-controls="hover-4"> Hover </a>
                </li>
                <li class="luci-tab__list-item ">
                    <a class="luci-link" href="#efficiency-4" role="tab" id="efficiency-4" aria-controls="efficiency-4"> Efficiency </a>
                </li>
            </ul>
            <div class="luci-tab__panel--nested luci-tab__panel--is-active" id="system-health-4" role="tabpanel" aria-labeledby="system-health-4">
            </div>
            <div class="luci-tab__panel--nested " id="capacity-4" role="tabpanel" aria-labeledby="capacity-4">
            </div>
            <div class="luci-tab__panel--nested " id="hover-4" role="tabpanel" aria-labeledby="hover-4">
            </div>
            <div class="luci-tab__panel--nested " id="efficiency-4" role="tabpanel" aria-labeledby="efficiency-4">
            </div>
        </div>
        <div class="luci-tab__panel " id="panel5h" role="tabpanel" aria-labeledby="panel5h">
            <ul class="luci-tab__list luci-tab__list--nested">
                <li class="luci-tab__list-item luci-tab__list-item--is-active">
                    <a class="luci-link" href="#system-health-5" role="tab" id="system-health-5" aria-controls="system-health-5"> System Health </a>
                </li>
                <li class="luci-tab__list-item ">
                    <a class="luci-link" href="#capacity-5" role="tab" id="capacity-5" aria-controls="capacity-5"> Capacity </a>
                </li>
                <li class="luci-tab__list-item ">
                    <a class="luci-link" href="#hover-5" role="tab" id="hover-5" aria-controls="hover-5"> Hover </a>
                </li>
                <li class="luci-tab__list-item ">
                    <a class="luci-link" href="#efficiency-5" role="tab" id="efficiency-5" aria-controls="efficiency-5"> Efficiency </a>
                </li>
            </ul>
            <div class="luci-tab__panel--nested luci-tab__panel--is-active" id="system-health-5" role="tabpanel" aria-labeledby="system-health-5">
            </div>
            <div class="luci-tab__panel--nested " id="capacity-5" role="tabpanel" aria-labeledby="capacity-5">
            </div>
            <div class="luci-tab__panel--nested " id="hover-5" role="tabpanel" aria-labeledby="hover-5">
            </div>
            <div class="luci-tab__panel--nested " id="efficiency-5" role="tabpanel" aria-labeledby="efficiency-5">
            </div>
        </div>
    </div>
</div>

Responsive Tabs

Responsive tabs utilize a horizontal scroll to access tabs not visible in small viewports. Open the tabs sink page and resize your browser width to less than 768px to see the responsive interaction.

Class Reference

Class Applies to Outcome

.luci-tab--on-light

.luci-tab

Applies a light background to tabs.

.luci-tab--on-dark

.luci-tab

Applies a dark background to tabs.

.luci-tab__list-item--is-active

.luci-tab__list-item

Applies the active styles to the selected tab.

.luci-tab__list--nested

.luci-tab__list-item

Applies styles to nested tabs.

.luci-tab__panel--is-active

.luci-tab__panel

Sets the tab panel to display:block;

.luci-tab__panel--nested

.luci-tab__panel

Adds padding to nested tab panels.