Navigation Menu
Example
import { Nav } from '@i4o/catalystui'
export default () => (
<Nav
items={[
{
id: 'home',
label: 'Home',
href: '/',
},
{
id: 'about',
label: 'About',
content: (
<div className='w-[21rem] lg:w-[23rem] p-3'>
<div className='grid grid-cols-6 gap-4'>
<div className='col-span-2 w-full bg-gray-100 dark:bg-gray-900 p-4 rounded-md'></div>
<div className='col-span-4 w-full flex flex-col space-y-3 bg-gray-100 dark:bg-gray-900 p-4 rounded-md'>
<div className='w-full bg-white dark:bg-gray-700 h-12 rounded-md'></div>
<div className='w-full bg-white dark:bg-gray-700 h-12 rounded-md'></div>
<div className='w-full bg-white dark:bg-gray-700 h-12 rounded-md'></div>
<div className='w-full bg-white dark:bg-gray-700 h-12 rounded-md'></div>
</div>
</div>
</div>
),
},
{
id: 'contact',
label: 'Contact',
href: '/contact',
},
]}
type='row'
/>
)Props
| Name | Type | Default | Description |
|---|---|---|---|
| items | Array<{ id: string, label: string | ReactNode, content: string | ReactNode }> | [] | Array of navigation items |
| type | row | column | 'row' | Type of navigation menu |