A navigation bar, navbar, is a horizontal bar that provides several access points to different parts of a system.
install yarn add @clayui/navigation-bar version use import NavigationBar from '@clayui/navigation-bar' ;
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
import {Provider } from '@clayui/core' ;
import NavigationBar from '@clayui/navigation-bar' ;
import Link from '@clayui/link' ;
import Button from '@clayui/button' ;
import React from 'react' ;
export default function App () {
const [active , setActive ] = React .useState ('Item 1' );
return (
<Provider spritemap = "/icons.svg" >
<div className = "p-4" >
<NavigationBar triggerLabel = {active }>
<NavigationBar . Item active = {active === 'Item 1' }>
<Link
href = "#"
onClick = {(event ) => {
event .preventDefault ();
setActive ('Item 1' );
}}
>
Item 1
</Link >
</NavigationBar . Item >
<NavigationBar . Item active = {active === 'Item 2' }>
<Button onClick = {() => setActive ('Item 2' )}>Item 2</Button >
</NavigationBar . Item >
<NavigationBar . Item active = {active === 'Item 3' }>
<Link
href = "#"
onClick = {(event ) => {
event .preventDefault ();
setActive ('Item 3' );
}}
>
Item 3
</Link >
</NavigationBar . Item >
</NavigationBar >
</div >
</Provider >
);
}Show code Use the property active to specify which element is currently active on the navigation.
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 <NavigationBar.Item> component to specify the element that will be rendered as an item. Components like <ClayButton /> and <Link /> when added as children of the component item are not required to add unique classes like nav-link or set the displayType to unstyled this is set OOTB.
import {Provider } from '@clayui/core' ;
import NavigationBar from '@clayui/navigation-bar' ;
import React , {useState } from 'react' ;
export default function App () {
const btnStyle = {
padding : '5.5px 16px 5.5px 16px' ,
borderColor : 'var(--indigo)' ,
};
return (
<Provider spritemap = "/icons.svg" >
<div className = "p-4" >
<NavigationBar triggerLabel = "Item 1" >
<NavigationBar . Item active >
<button className = "btn btn-unstyled" style = {btnStyle } type = "button" >
Item 1
</button >
</NavigationBar . Item >
<NavigationBar . Item >
<button className = "btn btn-unstyled" style = {btnStyle } type = "button" >
Item 2
</button >
</NavigationBar . Item >
<NavigationBar . Item >
<button className = "btn btn-unstyled" style = {btnStyle } type = "button" >
Item 3
</button >
</NavigationBar . Item >
</NavigationBar >
</div >
</Provider >
);
}Show code API Reference
NavigationBar typeof NavigationBar Parameters itemAriaCurrent boolean | undefined
Flag to define if the item represents the current page. Disable this
attribute only if there are multiple navigations on the page.
children * React .ReactElement < IProps , string | React .JSXElementConstructor < any >> | Array < React .ReactElement < IProps , string | React .JSXElementConstructor < any >>>
Children elements received from ClayNavigationBar component.
fluidSize false | "sm" | "lg" | "md" | "xl" | "xxl" | "xxxl" | undefined
Set a maximum width on container-fluid.
inverted boolean | undefined
Determines the style of the Navigation Bar
messages { close : "Close" ; open : "Open" ; trigger : "{0} Menu, Current Page: {1}" ; } | undefined
Defines aria-label messages to display for the screen reader.
spritemap string | undefined
Path to the location of the spritemap resource.
Set up dropdown’s trigger label.
Returns Element
Item ({ active , children , className , ... otherProps }: IProps ) => JSX .Element Parameters active boolean | undefined
Determines the active state of an dropdown list item.
children * React .ReactElement < any , string | React .JSXElementConstructor < any >>
Children elements received from ClayNavigationBar.Item component.
Returns ElementEdit this page on GitHub Contributors
Matuzalém Teles, Diego Nascimento, Bryce Osterhaus, Krešimir Čoko
Last edited May 11, 2025 at 5:57:01 PM
