Components

Tabs

Accessible tabbed panels driven by an items array.

Tabs switches between panels from a declarative items array.

Example

Preview

Account overview and recent activity.

import { Tabs } from '@officina/ui';

<Tabs
  items={[
    { label: 'Overview', content: <Overview /> },
    { label: 'Usage', content: <Usage /> },
  ]}
/>;

API

Prop	Type	Default	Description
items*	TabItem[]	—	Tab definitions; each provides a label and panel content.
defaultIndex	number	—	Initially selected tab index when uncontrolled.
onChange	(index: number) => void	—	Called with the newly selected index.
selectedIndex	number	—	Controlled selected tab index.
variant	enum	underline	Visual style of the tab strip.

Breadcrumb

Hierarchical navigation trail from an items array.

NavigationMenu

A horizontal site nav where items are plain links or triggers that open rich dropdown panels.

Tabs

Example

API

On this page