A Navigation displays a horizontal list of pages that are accessible to a user.
View source code
Navigation: The navigation component.NavigationItem: A helper component designed to represent an item inside a navigation list.The navigation presents a list of navigation items at the top to help the user navigate between pages. Please refer to the NavigationItem docs for more information on how to create the different links (emphasized, with icon, etc.).
The children prop is used to display the items in the navigation menu.
const Demo = () => {
const [activeIndex, setActiveIndex] = useState(1);
return (
<Navigation>
<NavigationItem
key="1"
text="Link 1"
isActive={activeIndex === 1}
onClick={() => setActiveIndex(1)}
/>
<NavigationItem
key="2"
text="Link 2"
isActive={activeIndex === 2}
onClick={() => setActiveIndex(2)}
/>
<NavigationItem
key="3"
text="Link 3"
isActive={activeIndex === 3}
onClick={() => setActiveIndex(3)}
/>
</Navigation>
);
};