Navigation Menu

The navigation menu component is used to display a list of links to pages within the site.

The Navigation Menu component is used to display a list of links to pages within the site. This component is used in a variety of places throughout the Kits, including the main navigation menu, the settings menu, etc.

Usage

Let's explore the different ways the Navigation Menu component can be used.

Basic Usage

The most basic usage of the Navigation Menu component is to display a list of links to pages within the site. This is the default usage of the component.

<NavigationMenu> <NavigationMenuItem link={{ path: '#', label: 'Home' }} /> <NavigationMenuItem link={{ path: '/about', label: 'About' }} /> <NavigationMenuItem link={{ path: '/contact', label: 'Contact' }} /> </NavigationMenu>

Bordered

To display a tabbed-style navigation menu, use the bordered prop.

<NavigationMenu bordered> <NavigationMenuItem link={{ path: '/', label: 'Home' }} /> <NavigationMenuItem link={{ path: '/about', label: 'About' }} /> <NavigationMenuItem link={{ path: '/contact', label: 'Contact' }} /> </NavigationMenu>

Pill Vertical

To display secondary navigation menus, the pill vertical style can be ideal. This style is used in the settings menu for the sub-navigation menus.

<NavigationMenu pill vertical> <NavigationMenuItem link={{ path: '/', label: 'Home' }} /> <NavigationMenuItem link={{ path: '/about', label: 'About' }} /> <NavigationMenuItem link={{ path: '/contact', label: 'Contact' }} /> </NavigationMenu>

Subscribe to our Newsletter
Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS