Navigation

Tabs

Tabbed navigation with smooth animated transitions.

Navigation Tabs

Organize content into switchable views with high-performance shared layout animations.

Overview Content Area

'use client'

import React from 'react'
import { Tabs, View } from 'biibaos'

export default function TabsDemo() {
  return (
    <div style={{ width: '100%', maxWidth: 600 }}>
      <Tabs
        tabs={[
          { id: '1', label: 'Overview', content: <View p={20} bg="surface-raised" radius="md">Overview Content Area</View> },
          { id: '2', label: 'Analytics', content: <View p={20} bg="surface-raised" radius="md">Analytics Dashboard Content</View> },
          { id: '3', label: 'Settings', content: <View p={20} bg="surface-raised" radius="md">System Settings Area</View> },
        ]}
      />
    </div>
  )
}

Pill Variant

A more contained, button-like appearance often used for sub-navigation or toggles.

Weekly View

'use client'

import React from 'react'
import { Tabs, View } from 'biibaos'

export default function PillTabsDemo() {
  return (
    <div style={{ width: '100%', maxWidth: 600 }}>
      <Tabs
        variant="pill"
        tabs={[
          { id: 'w', label: 'Weekly', content: <View p={20} bg="surface-raised" radius="md">Weekly View</View> },
          { id: 'm', label: 'Monthly', content: <View p={20} bg="surface-raised" radius="md">Monthly View</View> },
          { id: 'y', label: 'Yearly', content: <View p={20} bg="surface-raised" radius="md">Yearly View</View> },
        ]}
      />
    </div>
  )
}

Icons & Badges

Tabs support icons and badges to provide additional context and status.

Inbox Content

'use client'

import React from 'react'
import { Tabs, View, Icon } from 'biibaos'
import { Mail, Users } from 'lucide-react'

export default function RichTabsDemo() {
  return (
    <div style={{ width: '100%', maxWidth: 600 }}>
      <Tabs
        tabs={[
          { 
            id: 'i', 
            label: 'Messages', 
            icon: <Icon icon={Mail} size={14} />, 
            badge: '5', 
            content: <View p={20} bg="surface-raised" radius="md">Inbox Content</View> 
          },
          { 
            id: 'u', 
            label: 'Friends', 
            icon: <Icon icon={Users} size={14} />, 
            content: <View p={20} bg="surface-raised" radius="md">Friends List</View> 
          },
        ]}
      />
    </div>
  )
}

Properties

Prop	Type	Default	Description
`tabs`	`Tab[]`	—	Array of tab items containing unique id, label, icon, badge, and content
`activeId`	`string`	—	Controlled active tab identifier
`onChange`	`(id: string) => void`	—	Callback function triggered when the value changes
`variant`	`'line' \| 'pill'`	'line'	Semantic design theme variant
`leftAction`	`React.ReactNode`	—	Configures the leftAction option
`rightAction`	`React.ReactNode`	—	Configures the rightAction option

Dropdown

Carousel