Navigation Menu Vertical

View source Report an issue

The NavigationMenuVertical component is almost a vertical version of the NavigationMenu component. It is meant to be used the same way as NavigationMenu - but in sidedrawers and similar narrow panels where the horizontal navigation wouldn't work.

Functionality is a mix between the NavigationMenu and the Collapsible radix components.

From NavigationMenu this allows for marking links as active, and adds navigation-relevant accessibility information.

From Collapsible the NavigationMenuVertical.Accordion allows for: defaultOpen (uncontrolled), open (controlled) and onOpenChange props.

Note!: Unfortunately value, defaultValue, onValueChange props which are usually available on NavigationMenu will have no effect (replaced directly with the Collapsible props on the Accordion as per above, instead). This was necessary as NavigationMenu (radix) itself was buggy when attempting to use vertically. Causing both issues with nested open Accordions, as well as buggy tabbing behaviour which was not acceptable. Provided radix solves this, this component may be modified.

<div className="w-75">
  <NavigationMenuVertical>
      <NavigationMenuVertical.Link active onClick={()=>{console.log(1)}}>One</NavigationMenuVertical.Link>    
      <NavigationMenuVertical.Link href="google.com">Two</NavigationMenuVertical.Link>    
      <NavigationMenuVertical.Accordion>
        <NavigationMenuVertical.AccordionTrigger>Trigger 1</NavigationMenuVertical.AccordionTrigger>
        <NavigationMenuVertical.AccordionContent>
          <NavigationMenuVertical.Link onClick={()=>{console.log(1)}}>Nested: One</NavigationMenuVertical.Link>
          <NavigationMenuVertical.Link onClick={()=>{console.log(2)}}>Nested: Two</NavigationMenuVertical.Link>
        </NavigationMenuVertical.AccordionContent>
      </NavigationMenuVertical.Accordion>
      <NavigationMenuVertical.Accordion defaultOpen={true}>
        <NavigationMenuVertical.AccordionTrigger>Trigger 2</NavigationMenuVertical.AccordionTrigger>
        <NavigationMenuVertical.AccordionContent>
          <NavigationMenuVertical.Link onClick={()=>{console.log(3)}}>Nested: Three</NavigationMenuVertical.Link>
          <NavigationMenuVertical.Link onClick={()=>{console.log(4)}}>Nested: Four</NavigationMenuVertical.Link>
        </NavigationMenuVertical.AccordionContent>
      </NavigationMenuVertical.Accordion>
      <NavigationMenuVertical.Accordion value={4}>
      <NavigationMenuVertical.AccordionTrigger>Trigger With Submenu</NavigationMenuVertical.AccordionTrigger>
      <NavigationMenuVertical.AccordionContent>
          <NavigationMenuVertical.Link href="#1">Nested: #1</NavigationMenuVertical.Link>
          <NavigationMenuVertical.Link href="#2">Nested: #2</NavigationMenuVertical.Link>    
          <NavigationMenuVertical.Link href="#3">Nested: #3</NavigationMenuVertical.Link>    
          <NavigationMenuVertical.Accordion value='nested-trigger-1'>
            <NavigationMenuVertical.AccordionTrigger >Nested</NavigationMenuVertical.AccordionTrigger>
            <NavigationMenuVertical.AccordionContent>
              <NavigationMenuVertical.Link href="#4">Nested: #4</NavigationMenuVertical.Link>
              <NavigationMenuVertical.Accordion value='nested-trigger-2'>
              <NavigationMenuVertical.AccordionTrigger>Nested Nested</NavigationMenuVertical.AccordionTrigger>
              <NavigationMenuVertical.AccordionContent>
                <NavigationMenuVertical.Link href="#5">Nested: #5</NavigationMenuVertical.Link>
              </NavigationMenuVertical.AccordionContent>
            </NavigationMenuVertical.Accordion>
          </NavigationMenuVertical.AccordionContent>
        </NavigationMenuVertical.Accordion>
      </NavigationMenuVertical.AccordionContent>
    </NavigationMenuVertical.Accordion>
  </NavigationMenuVertical>
</div>

API Reference

NavigationMenuVertical

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`asChild`	`boolean`	-	-
`dir`	`"ltr"` \| `"rtl"`	-	-
`orientation`	`"horizontal"` \| `"vertical"`	-	-

NavigationMenuVertical.Accordion

Prop	Type	Default	Required
`asChild`	`boolean`	-	-
`defaultOpen`	`boolean`	-	-
`disabled`	`boolean`	-	-
`onOpenChange`	`(open: boolean) => void`	-	-
`open`	`boolean`	-	-

NavigationMenuVertical.AccordionContent

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`asChild`	`boolean`	-	-
`forceMount`	`true`	-	-

NavigationMenuVertical.AccordionTrigger

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`asChild`	`boolean`	-	-
`size`	`"md"` \| `"lg"`	-	-

NavigationMenuVertical.Link

Prop	Type	Default	Required
`active`	`boolean`	-	-
`as`	`JSX.IntrinsicElements`	-	-
`asChild`	`boolean`	-	-
`onSelect`	`(event: Event) => void`	-	-
`size`	`"md"` \| `"lg"`	-	-

NavigationMenuVertical.Item

Prop	Type	Default	Required
`asChild`	`boolean`	-	-

NavigationMenuVertical.ItemContent

Prop	Type	Default	Required

NavigationMenuVertical.Icon

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`is`	`FC<SVGProps<SVGSVGElement>>`	-
`size`	`Partial<Record<Breakpoint, "sm" \| "md" \| "lg">>` \| `"sm"` \| `"md"` \| `"lg"`	-	-

NavigationMenuVertical.Text

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`family`	`"body"` \| `"display"` \| `"mono"` \| `Partial<Record<Breakpoint, "body" \| "display" \| "mono">>`	-	-
`isExpanded`	`boolean`	-	-
`noCapsize`	`boolean`	-	-
`size`	`Partial<Record<Breakpoint, "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl">>` \| `"xs"` \| `"sm"` \| `"md"` \| `"lg"` \| `"xl"` \| `"2xl"` \| `"3xl"` \| `"4xl"`	-	-
`weight`	`"bold"` \| `"normal"` \| `Partial<Record<Breakpoint, "bold" \| "normal">>`	-	-