Navigation Menu
A collection of links for navigating websites.
Navigation Menu wraps the
Base UI Navigation Menu
primitive, positions its popup with Base UI's Positioner and marks each part
with data-slot. It is an Authored component: coss/ui has no Navigation Menu,
so its Structure comes from shadcn/ui and its Design from the nearest Port.
Installation
npx shadcn@latest add @kosori/navigation-menuExample
navigation-menu-example.tsx
import {
IconBook,
IconBrandGithub,
IconCode,
IconComponents,
IconRocket,
} from '@tabler/icons-react';
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
} from '@/components/ui/navigation-menu';
const NavigationMenuExample = () => (
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className='grid w-80 gap-1'>
<li>
<NavigationMenuLink href='#'>
<IconRocket aria-hidden='true' />
<span className='font-medium'>Introduction</span>
</NavigationMenuLink>
</li>
<li>
<NavigationMenuLink href='#'>
<IconBook aria-hidden='true' />
<span className='font-medium'>Installation</span>
</NavigationMenuLink>
</li>
<li>
<NavigationMenuLink href='#'>
<IconCode aria-hidden='true' />
<span className='font-medium'>Typography</span>
</NavigationMenuLink>
</li>
</ul>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuTrigger>Components</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className='grid w-80 gap-1'>
<li>
<NavigationMenuLink href='#'>
<IconComponents aria-hidden='true' />
<span className='font-medium'>Alert Dialog</span>
</NavigationMenuLink>
</li>
<li>
<NavigationMenuLink href='#'>
<IconComponents aria-hidden='true' />
<span className='font-medium'>Hover Card</span>
</NavigationMenuLink>
</li>
<li>
<NavigationMenuLink href='#'>
<IconComponents aria-hidden='true' />
<span className='font-medium'>Progress</span>
</NavigationMenuLink>
</li>
</ul>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink href='#'>
<IconBrandGithub aria-hidden='true' />
<span className='font-medium'>GitHub</span>
</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
);
export default NavigationMenuExample;
Usage
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
} from '@/components/ui/navigation-menu';
const NavigationMenuDemo = () => (
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
<NavigationMenuContent>
<NavigationMenuLink href='/docs'>Introduction</NavigationMenuLink>
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
);