Tabs

Tabs are horizontal navigation elements used to display content within the same page.

Usage

Display different content based on the Tabs behavior.

<ul class="drac-tabs drac-tabs-white">
  <li class="drac-tab drac-tab-active">
    <a class="drac-tab-link drac-text" href="#">Item One</a>
  </li>
  <li class="drac-tab">
    <a class="drac-tab-link drac-text" href="#">Item Two</a>
  </li>
  <li class="drac-tab">
    <a class="drac-tab-link drac-text" href="#">Item Three</a>
  </li>
</ul>
<Tabs>
  <li className="drac-tab drac-tab-active">
    <a className="drac-tab-link drac-text" href="#">
      Item One
    </a>
  </li>
  <li className="drac-tab">
    <a className="drac-tab-link drac-text" href="#">
      Item Two
    </a>
  </li>
  <li className="drac-tab">
    <a className="drac-tab-link drac-text" href="#">
      Item Three
    </a>
  </li>
</Tabs>;

Colors

Tabs can be customized to use any of the Dracula UI theme colors.

<div class="drac-box">
  <div class="drac-box">
    <ul class="drac-tabs drac-tabs-white">
      <li class="drac-tab drac-tab-active">
        <a class="drac-tab-link drac-text" href="#">Item One</a>
      </li>
      <li class="drac-tab">
        <a class="drac-tab-link drac-text" href="#">Item Two</a>
      </li>
      <li class="drac-tab">
        <a class="drac-tab-link drac-text" href="#">Item Three</a>
      </li>
    </ul>
  </div>
  <div class="drac-box">
    <ul class="drac-tabs drac-tabs-cyan">
      <li class="drac-tab drac-tab-active">
        <a class="drac-tab-link drac-text" href="#">Item One</a>
      </li>
      <li class="drac-tab">
        <a class="drac-tab-link drac-text" href="#">Item Two</a>
      </li>
      <li class="drac-tab">
        <a class="drac-tab-link drac-text" href="#">Item Three</a>
      </li>
    </ul>
  </div>
  <div class="drac-box">
    <ul class="drac-tabs drac-tabs-green">
      <li class="drac-tab drac-tab-active">
        <a class="drac-tab-link drac-text" href="#">Item One</a>
      </li>
      <li class="drac-tab">
        <a class="drac-tab-link drac-text" href="#">Item Two</a>
      </li>
      <li class="drac-tab">
        <a class="drac-tab-link drac-text" href="#">Item Three</a>
      </li>
    </ul>
  </div>
  <div class="drac-box">
    <ul class="drac-tabs drac-tabs-orange">
      <li class="drac-tab drac-tab-active">
        <a class="drac-tab-link drac-text" href="#">Item One</a>
      </li>
      <li class="drac-tab">
        <a class="drac-tab-link drac-text" href="#">Item Two</a>
      </li>
      <li class="drac-tab">
        <a class="drac-tab-link drac-text" href="#">Item Three</a>
      </li>
    </ul>
  </div>
  <div class="drac-box">
    <ul class="drac-tabs drac-tabs-pink">
      <li class="drac-tab drac-tab-active">
        <a class="drac-tab-link drac-text" href="#">Item One</a>
      </li>
      <li class="drac-tab">
        <a class="drac-tab-link drac-text" href="#">Item Two</a>
      </li>
      <li class="drac-tab">
        <a class="drac-tab-link drac-text" href="#">Item Three</a>
      </li>
    </ul>
  </div>
  <div class="drac-box">
    <ul class="drac-tabs drac-tabs-purple">
      <li class="drac-tab drac-tab-active">
        <a class="drac-tab-link drac-text" href="#">Item One</a>
      </li>
      <li class="drac-tab">
        <a class="drac-tab-link drac-text" href="#">Item Two</a>
      </li>
      <li class="drac-tab">
        <a class="drac-tab-link drac-text" href="#">Item Three</a>
      </li>
    </ul>
  </div>
  <div class="drac-box">
    <ul class="drac-tabs drac-tabs-red">
      <li class="drac-tab drac-tab-active">
        <a class="drac-tab-link drac-text" href="#">Item One</a>
      </li>
      <li class="drac-tab">
        <a class="drac-tab-link drac-text" href="#">Item Two</a>
      </li>
      <li class="drac-tab">
        <a class="drac-tab-link drac-text" href="#">Item Three</a>
      </li>
    </ul>
  </div>
  <div class="drac-box">
    <ul class="drac-tabs drac-tabs-yellow">
      <li class="drac-tab drac-tab-active">
        <a class="drac-tab-link drac-text" href="#">Item One</a>
      </li>
      <li class="drac-tab">
        <a class="drac-tab-link drac-text" href="#">Item Two</a>
      </li>
      <li class="drac-tab">
        <a class="drac-tab-link drac-text" href="#">Item Three</a>
      </li>
    </ul>
  </div>
</div>
<Box>
  <Box>
    <Tabs color="white">
      <li className="drac-tab drac-tab-active">
        <a className="drac-tab-link drac-text" href="#">
          Item One
        </a>
      </li>
      <li className="drac-tab">
        <a className="drac-tab-link drac-text" href="#">
          Item Two
        </a>
      </li>
      <li className="drac-tab">
        <a className="drac-tab-link drac-text" href="#">
          Item Three
        </a>
      </li>
    </Tabs>
  </Box>
  <Box>
    <Tabs color="cyan">
      <li className="drac-tab drac-tab-active">
        <a className="drac-tab-link drac-text" href="#">
          Item One
        </a>
      </li>
      <li className="drac-tab">
        <a className="drac-tab-link drac-text" href="#">
          Item Two
        </a>
      </li>
      <li className="drac-tab">
        <a className="drac-tab-link drac-text" href="#">
          Item Three
        </a>
      </li>
    </Tabs>
  </Box>
  <Box>
    <Tabs color="green">
      <li className="drac-tab drac-tab-active">
        <a className="drac-tab-link drac-text" href="#">
          Item One
        </a>
      </li>
      <li className="drac-tab">
        <a className="drac-tab-link drac-text" href="#">
          Item Two
        </a>
      </li>
      <li className="drac-tab">
        <a className="drac-tab-link drac-text" href="#">
          Item Three
        </a>
      </li>
    </Tabs>
  </Box>
  <Box>
    <Tabs color="orange">
      <li className="drac-tab drac-tab-active">
        <a className="drac-tab-link drac-text" href="#">
          Item One
        </a>
      </li>
      <li className="drac-tab">
        <a className="drac-tab-link drac-text" href="#">
          Item Two
        </a>
      </li>
      <li className="drac-tab">
        <a className="drac-tab-link drac-text" href="#">
          Item Three
        </a>
      </li>
    </Tabs>
  </Box>
  <Box>
    <Tabs color="pink">
      <li className="drac-tab drac-tab-active">
        <a className="drac-tab-link drac-text" href="#">
          Item One
        </a>
      </li>
      <li className="drac-tab">
        <a className="drac-tab-link drac-text" href="#">
          Item Two
        </a>
      </li>
      <li className="drac-tab">
        <a className="drac-tab-link drac-text" href="#">
          Item Three
        </a>
      </li>
    </Tabs>
  </Box>
  <Box>
    <Tabs color="purple">
      <li className="drac-tab drac-tab-active">
        <a className="drac-tab-link drac-text" href="#">
          Item One
        </a>
      </li>
      <li className="drac-tab">
        <a className="drac-tab-link drac-text" href="#">
          Item Two
        </a>
      </li>
      <li className="drac-tab">
        <a className="drac-tab-link drac-text" href="#">
          Item Three
        </a>
      </li>
    </Tabs>
  </Box>
  <Box>
    <Tabs color="red">
      <li className="drac-tab drac-tab-active">
        <a className="drac-tab-link drac-text" href="#">
          Item One
        </a>
      </li>
      <li className="drac-tab">
        <a className="drac-tab-link drac-text" href="#">
          Item Two
        </a>
      </li>
      <li className="drac-tab">
        <a className="drac-tab-link drac-text" href="#">
          Item Three
        </a>
      </li>
    </Tabs>
  </Box>
  <Box>
    <Tabs color="yellow">
      <li className="drac-tab drac-tab-active">
        <a className="drac-tab-link drac-text" href="#">
          Item One
        </a>
      </li>
      <li className="drac-tab">
        <a className="drac-tab-link drac-text" href="#">
          Item Two
        </a>
      </li>
      <li className="drac-tab">
        <a className="drac-tab-link drac-text" href="#">
          Item Three
        </a>
      </li>
    </Tabs>
  </Box>
</Box>;

Properties

color

The Dracula UI color for the Tabs.

"purpleCyan" | "yellowPink" | "cyanGreen" | "pinkPurple" | "cyan" | "green" | "orange" | "pink" | "purple" | "red" | "yellow" | "white" | "black" | "blackSecondary" | "blackLight"