Skip to content
Paramanu v0.1.0-alpha.0

Tabs

Tabs organize content into separate panels, with only one visible at a time.

Basic Usage

Content
import { Tabs, TabList, Tab, TabPanel } from "@paramanu/navigation-react"


export default function App() {
return (
  <Tabs>
    <TabList>
      <Tab active>Tab 1</Tab>
      <Tab>Tab 2</Tab>
    </TabList>
    <TabPanel>Content</TabPanel>
  </Tabs>
)
}
<div class="pm-tabs pm-tabs--line pm-tabs--md pm-tabs--horizontal">
<div class="pm-tabs__list" role="tablist">
  <button class="pm-tabs__tab pm-tabs__tab--active" role="tab" aria-selected="true">Tab 1</button>
  <button class="pm-tabs__tab" role="tab" aria-selected="false" tabindex="-1">Tab 2</button>
</div>
<div class="pm-tabs__panel" role="tabpanel" tabindex="0">Content</div>
</div>

Variants

Supports "line", "enclosed", and "pill" variants.