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>