Podo UI

Podo UI

Tab

Tab navigation component

Basic Usage

ul.tabs Using the structure automatically applies tab navigation styles. Add the class to active tabs.

HTML
<ul class="tabs">
  <li class="on">
    <a href="#tab1">Tab 1</a>
  </li>
  <li>
    <a href="#tab2">Tab 2</a>
  </li>
  <li>
    <a href="#tab3">Tab 3</a>
  </li>
</ul>
Live Example:

Fill Style

.fill Adding the class makes each tab expand to equal width, filling the entire width.

HTML
<ul class="tabs fill">
  <li class="on">
    <a href="#tab1">Home</a>
  </li>
  <li>
    <a href="#tab2">Profile</a>
  </li>
  <li>
    <a href="#tab3">Settings</a>
  </li>
</ul>
Live Example:

Many Tabs

When there are many tabs, horizontal scrolling is automatically enabled:

Live Example:

Practical Example

Example using tabs with content:

Overview

Podo UI is a modern design system.

Using in SCSS

component.module.scss
@use 'podo-ui/mixin' as *;

ul.tabs {
  padding: 0;
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px inset color(border);

  // Fill style
  &.fill > li {
    flex: 1;
  }

  > li {
    text-align: center;
    padding: 0;

    > a {
      @include p3;
      display: block;
      padding: s(2) s(5);
      color: color(text-sub);

      &:hover {
        color: inherit;
      }

      &:focus-visible:not(:disabled) {
        outline: 4px solid color(primary-outline);
      }
    }

    // Active tab
    &.on > a {
      @include p3-semibold;
      color: color(primary) !important;
      border-bottom: 1px inset color(primary);
      margin-bottom: -1px;
    }
  }
}