Second Nav Header
Second Nav Header is a secondary navigation bar that appears above the primary navigation and provides additional context or controls.
Loading preview…
1
<SecondNavHeader2
items={[3
{ label: 'Workspace' },4
{ label: 'Design System' },5
{ icon: <HomeIcon />, label: 'Components' },Installation
npx sdaia-ui@latest add second-nav-header
Usage
import { SecondNavHeader } from "@/components/ui/second-nav-header"<SecondNavHeader style="gray" />Examples
Primary
Secondary navigation header in the primary brand colour.
Loading preview…
1
<SecondNavHeader2
items={[3
{ label: 'Cloudy' },4
{ label: '3-Sep-2024' },5
{ label: '2:30 PM' },Gray
Secondary navigation header in the grey style.
Loading preview…
1
<SecondNavHeader2
items={[3
{ label: 'Cloudy' },4
{ label: '3-Sep-2024' },5
{ label: '2:30 PM' },API Reference
Second Nav Header Props
Props for the Second Nav Header component.
Prop | Type | Default | Required |
|---|---|---|---|
items | SubHeaderItemProps[] | — | optional |
instance | ReactNode | — | optional |
label | string | — | optional |
actions | ReactNode | — | optional |
divider | boolean | true | optional |
dir | 'ltr' | 'rtl' | — | optional |
rtl | boolean | — | optional |
className | string | — | optional |