Navigation Menu

A flexible navigation component that organizes site or app sections for easy browsing and accessibility.

Installation

npx shadcn@latest add https://display-ui.vercel.app/r/NavigationMenu

Usage

import {
  NavigationMenuBar,
  NavigationMenuItem,
  NavigationMenuLogo,
} from "@/components/display-ui/NavigationMenu"

<NavigationMenuBar>
  <NavigationMenuLogo
    src="https://images.unsplash.com/photo-1511367461989-f85a21fda167?q=80&w=1931&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    className=""
  ></NavigationMenuLogo>
  <NavigationMenuItem
    href="/?path=/story/components-avatar--default"
    className="p-2 rounded focus:bg-purple-400 hover:bg-blue-400"
    target="_blank"
  >
    <Label>Avatar</Label>
  </NavigationMenuItem>
  <NavigationMenuItem
    href="/?path=/story/components-badge--default"
    className="p-2 rounded focus:bg-purple-400 hover:bg-blue-400"
    target="_blank"
  >
    <Label>Badge</Label>
  </NavigationMenuItem>
  <NavigationMenuItem
    href="/?path=/story/components-buttonring--default"
    className="p-2 rounded focus:bg-purple-400 hover:bg-blue-400"
    target="_blank"
  >
    <Label>Button</Label>
  </NavigationMenuItem>
  <NavigationMenuItem
    href="/?path=/story/components-drawer--default"
    className="p-2 rounded focus:bg-purple-400 hover:bg-blue-400"
    target="_blank"
  >
    <Label>Drawer</Label>
  </NavigationMenuItem>
  <NavigationMenuItem
    href="/?path=/story/components-infinitecarousel--default"
    className="p-2 rounded focus:bg-purple-400 hover:bg-blue-400"
    target="_blank"
  >
    <Label>Carousel</Label>
  </NavigationMenuItem>
</NavigationMenuBar>

API

For NavigateMenu Container

Attribute	Type	Description	Default
children	`ReactNode \| ReactNode[]`	Navigation items rendered inside the floating navigation menu. Typically composed of NavigateItem components.	-
className	`string`	Additional CSS classes to customize the navigation menu container styling.	-

For NavigateItem Component

Attribute	Type	Description	Default
src	`string`	Source URL of the icon image displayed inside the navigation item.	-
alt	`string`	Alternative text for the navigation icon image.	""
size	`number`	Base size (in pixels) of the navigation item icon. Used for hover scaling behavior.	40
href	`string`	Optional URL to open in a new tab when the navigation item is clicked.	-
onClick	`() => void`	Optional click handler for the navigation item. Takes precedence over href if provided.	-
tooltipContent	`string`	Optional tooltip text displayed when hovering over the navigation item.	-
className	`string`	Additional CSS classes to customize the navigation item styling.	-

Credits

This component is inspired by Rehman Kalawant Design Shared On Github.

Installation

Usage

API

Navigation Menu Props

Credits

On this page