NavigationsmenüHauptnavigation der Anwendung.
NavigationMenu
import NavigationMenu, { NavigationLogo, NavigationLeft, NavigationRight, NavigationItem} from '@/components/NavigationMenu'; export function Example() { return ( <NavigationMenu> <NavigationLogo $srcLight="/logo-light.svg" $srcDark="/logo-dark.svg" $alt="Logo" $href="/" /> <NavigationLeft> <NavigationItem href="/lorem">Lorem</NavigationItem> <NavigationItem href="/ipsum">Ipsum</NavigationItem> </NavigationLeft> <NavigationRight> <NavigationItem href="/dolor">Dolor</NavigationItem> </NavigationRight> </NavigationMenu> );}
NavigationDropdown
import NavigationMenu, { NavigationLeft, NavigationDropdown, NavigationDropdownColumn, NavigationDropdownLabel, NavigationDropdownItem} from '@/components/NavigationMenu'; export function Example() { return ( <NavigationMenu> <NavigationLeft> <NavigationDropdown href="/products" $title="Lorem"> <NavigationDropdownColumn> <NavigationDropdownLabel>Ipsum</NavigationDropdownLabel> <NavigationDropdownItem href="/dolor"> Dolor sit amet </NavigationDropdownItem> <NavigationDropdownItem href="/consectetur"> Consectetur adipiscing </NavigationDropdownItem> </NavigationDropdownColumn> </NavigationDropdown> </NavigationLeft> </NavigationMenu> );}
NavigationMenu (with $banner)
import NavigationMenu, { NavigationLogo, NavigationLeft, NavigationRight, NavigationItem} from '@/components/NavigationMenu'; export function Example() { return ( <NavigationMenu $banner={{ content: ( <span> Available soon: New dashboard experience. </span> ), }} > <NavigationLogo $srcLight="/logo-light.svg" $srcDark="/logo-dark.svg" $alt="Logo" $href="/" /> <NavigationLeft> <NavigationItem href="/lorem">Lorem</NavigationItem> <NavigationItem href="/ipsum">Ipsum</NavigationItem> </NavigationLeft> <NavigationRight> <NavigationItem href="/dolor">Dolor</NavigationItem> </NavigationRight> </NavigationMenu> );}