Documentation
Navigation Menu

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

NameTypeDefaultDescription
itemsArray<{ id: string, label: string | ReactNode, content: string | ReactNode }>[]Array of navigation items
typerow | column'row'Type of navigation menu