Navigation Menu

A responsive collection of links with optional dropdown menus.

Source

Installation

npx @rahimstack@latest add navigation-menu

Usage

NavigationMenu is based on the NavigationMenu Primitive from Radix UI.

On small screens, the menu is collapsed into a hamburger button, which triggers a drawer containing the menu items rendered using a VerticalMenu component.

  • You can customize the drawer by passing a mobileDrawerProps prop to the component.
  • Additionally, you can add content to the drawer by passing mobileDrawerHeader and mobileDrawerContent props to the component.

API Reference

const NavigationMenuAnatomy = defineStyleAnatomy({
    root: cva([
        "UI-NavigationMenu__root",
        "relative inline-block z-10 max-w-full",
    ]),
    item: cva([
        "UI-NavigationMenu__item",
        "relative group/navigationMenu_item inline-flex items-center h-full select-none rounded-[--radius] leading-none no-underline outline-none transition-colors",
        "text-[--muted] hover:bg-[--subtle] hover:text-[--text-color] focus:bg-[--subtle]",
        "data-[current=true]:text-[--brand]", // Selected
        "font-[600] leading-none",
        "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--ring]",
    ], {
        variants: {
            size: {
                sm: "px-3 h-8 text-sm",
                md: "px-3 h-10 text-sm",
                lg: "px-3 h-12 text-base",
            },
        },
        defaultVariants: {
            size: "md",
        },
    }),
    icon: cva([
        "UI-VerticalNav__icon",
        "flex-shrink-0 mr-3",
        "text-[--muted] group-hover/navigationMenu_item:text-[--text-color] data-[current=true]:text-[--brand] data-[current=true]:group-hover/navigationMenu_item:text-[--brand]",
    ], {
        variants: {
            size: {
                sm: "size-4",
                md: "size-5",
                lg: "size-6",
            },
        },
        defaultVariants: {
            size: "md",
        },
    }),
    itemChevron: cva([
        "UI-VerticalNav__itemChevron",
        "ml-2 w-4 h-4 transition-transform duration-200 group-hover/navigationMenu_item:rotate-180",
    ]),
    desktopList: cva([
        "UI-VerticalNav__desktopList",
        "inline-block space-x-1",
    ], {
        variants: {
            switchToDrawerBelow: {
                sm: "hidden sm:flex",
                md: "hidden md:flex",
                lg: "hidden lg:flex",
                never: "flex",
            },
        },
        defaultVariants: {
            switchToDrawerBelow: "md",
        },
    }),
    mobileTrigger: cva([
        "UI-VerticalNav__mobileTrigger",
        "items-center justify-center rounded-[--radius] p-2 text-[--muted] hover:bg-[--subtle] hover:text-[--text-color]",
        "focus:outline-none focus:ring-2 focus:ring-inset focus:ring-[--ring]",
    ], {
        variants: {
            switchToDrawerBelow: {
                sm: "inline-flex sm:hidden",
                md: "inline-flex md:hidden",
                lg: "inline-flex lg:hidden",
                never: "hidden",
            },
        },
        defaultVariants: {
            switchToDrawerBelow: "md",
        },
    }),
    menuContainer: cva([
        "UI-NavigationMenu__menuContainer",
        "absolute left-0 top-0 overflow-hidden p-1 data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out",
        "data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52",
        "data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52",
        "data-[motion=to-start]:slide-out-to-left-52 w-full sm:min-w-full",
    ]),
    viewport: cva([
        "UI-NavigationMenu__viewport",
        "relative mt-1.5 duration-300 h-[var(--radix-navigation-menu-viewport-height)]",
        "w-full min-w-96 overflow-hidden rounded-[--radius] shadow-sm border bg-[--paper] text-[--text-color]",
        "data-[state=open]:animate-in data-[state=open]:zoom-in-90 data-[state=open]:fade-in-25",
        "data-[state=closed]:animate-out data-[state=closed]:zoom-out-100 data-[state=closed]:fade-out-0",
    ]),
})