Tabs - Components - Spectre.css CSS Framework
Author: Yan Zhu
Description: Tabs enable quick switch between different views. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.

PayPal GitHub

## SPECTRE

DOCS
Getting started

- Installation
- Custom version
- Browser support
- What's new

Elements

- Typography
- Tables
- Buttons
- Forms
- Icons.css
- Labels
- Code
- Media

Layout

- Flexbox grid
- Responsive
- Hero
- Navbar

Components

- Accordions
- Avatars
- Badges
- Bars
- Breadcrumbs
- Cards
- Chips
- Empty states
- Menu
- Modals
- Nav
- Pagination
- Panels
- Popovers
- Steps
- Tabs
- Tiles
- Toasts
- Tooltips

Utilities

- Colors
- Cursors
- Display
- Divider
- Loading
- Position
- Shapes
- Text

Experimentals

- 360-Degree Viewer
- Autocomplete
- Calendars
- Carousels
- Comparison sliders
- Filters
- Meters
- Off-canvas
- Parallax
- Progress
- Sliders
- Timelines

### Tabs#

Tabs enable quick switch between different views.

- Music
- Playlists
- Radio
- Store

- Music
- Playlists
- Radio

Add a container element with the `tab` class. And add child elements with the `tab-item` class. You can add the `tab-block` class for a full-width tab. The `tab-item` or its child <a> with the `active` class will be highlighted.

    <ul class="tab tab-block">
      <li class="tab-item active">
        <a href="#">Music</a>
      </li>
      <li class="tab-item">
        <a href="#" class="active">Playlists</a>
      </li>
      <li class="tab-item">
        <a href="#">Radio</a>
      </li>
      <li class="tab-item">
        <a href="#">Connect</a>
      </li>
    </ul>

- Music
- Playlists
- Radio

- Music
- Playlists
- Radio

If you need `badges` on tabs, you can add badge class to the element within `tab-item`.

    <ul class="tab tab-block">
      <li class="tab-item active">
        <a href="#" class="badge" data-badge="9">
          Music
        </a>
      </li>
    </ul>

- Music
- Playlists
- Radio
- Store

You could add a search box or buttons inside a tab. Add the `tab-action` class to the `tab-item`.

    <ul class="tab">
      <li class="tab-item active">
        <a href="#">
          Music
        </a>
      </li>
      <li class="tab-item tab-action">
        <div class="input-group input-inline">
          <input class="form-input input-sm" type="text">
          <button class="btn btn-primary btn-sm input-group-btn">Search</button>
        </div>
      </li>
    </ul>

GitHub · Twitter · PayPal Donate · Patreon Sponsor · Version

Designed and built with ♥ by Yan Zhu. Licensed under the MIT License.