Tabs

Tab navigation with switchable content panels.

Underline Style (Default)

Overview

Welcome to the overview tab. This is the default active panel.

Features

Explore the feature list in this tab panel.

Pricing

View pricing information here.

Pill Style

Showing all items.

Showing active items only.

Showing archived items.


    <!-- Underline tabs -->

    <div class="tab-list" id="my-tabs">

      <button class="tab active" onclick="...">Tab 1</button>

      <button class="tab" onclick="...">Tab 2</button>

    </div>

    <div id="my-panels">

      <div id="t1" class="tab-panel active">Content 1</div>

      <div id="t2" class="tab-panel">Content 2</div>

    </div>


    <!-- Pill tabs -->

    <div class="tab-list-pills" id="my-pills">

      <button class="tab active" onclick="...">All</button>

      <button class="tab" onclick="...">Active</button>

    </div>

Breadcrumbs

Navigation trails to show the user's current location.

Default Breadcrumb

With Arrow Separators

Using <what-breadcrumb>

Home Features Navigation


    <!-- Manual breadcrumb -->

    <nav class="navigation-breadcrumb">

      <a href="/" class="breadcrumb-item">Home</a>

      <span class="breadcrumb-separator">/</span>

      <a href="/features" class="breadcrumb-item">Features</a>

      <span class="breadcrumb-separator">/</span>

      <span class="breadcrumb-current">Navigation</span>

    </nav>


    <!-- Component -->

    <what-breadcrumb>

      <a href="/">Home</a>

      <a href="/features">Features</a>

      <span>Current Page</span>

    </what-breadcrumb>

Pagination

Page navigation for multi-page content.

Default Pagination

With Ellipsis

Using <what-pagination>

« Prev 1 2 3 Next »


    <!-- Manual pagination -->

    <nav class="navigation-pagination">

      <a href="#" class="page-link">&laquo; Previous</a>

      <a href="#" class="page-link">1</a>

      <a href="#" class="page-link active">2</a>

      <a href="#" class="page-link">3</a>

      <a href="#" class="page-link">Next &raquo;</a>

    </nav>


    <!-- Component -->

    <what-pagination>

      <a href="#">&laquo; Prev</a>

      <a href="#" class="active">2</a>

      <a href="#">Next &raquo;</a>

    </what-pagination>

CSS Classes Reference

Tab Classes

Class	Description
`tab-list`	Tab button container (underline style)
`tab-list-pills`	Tab button container (pill style)
`tab`	Individual tab button
`tab active`	Currently selected tab
`tab-panel`	Tab content panel
`tab-panel active`	Visible tab panel

Breadcrumb Classes

Class	Description
`navigation-breadcrumb`	Breadcrumb container
`breadcrumb-item`	Clickable breadcrumb link
`breadcrumb-separator`	Separator between items
`breadcrumb-current`	Current page (non-clickable)

Pagination Classes

Class	Description
`navigation-pagination`	Pagination container
`page-link`	Page number or prev/next link
`page-link active`	Current page indicator