README
title: 'Navigation Bar' description: 'A navigation bar, navbar, is a horizontal bar that provides several access points to different parts of a system.' lexiconDefinition: 'https://liferay.design/lexicon/core-components/navigation/horizontal-nav/' packageNpm: '@clayui/navigation-bar'
import { NavigationBar, NavigationBarWithStyledItem, } from '$packages/clay-navigation-bar/docs/index';
As described on Lexicon, a NavigationBar can be styled with an inverted theme. It displays navigation items in a dark background with light text. It is always placed right below the header. Use inverted
property for this.
triggerLabel
property is mandatory
because it specifies the name of the trigger of the dropdown that will be
placed when the screen when on small screens.
Item
For enabling more personalization on NavigationBar items, you can pass <ClayNavigationBar.Item>
component to specify the element that will be rendered as an item.
Use the property active
to specify which element is currently active on the navigation.
nav-link
class is mandatory for styling the children of ClayNavigationBar.Item as Lexicon describes but if you don't prefer to follow Lexicon, you can style with whatever you want.