Grapes homepage1.44.0

    Navigation

    A Navigation displays a horizontal list of pages that are accessible to a user.

    View source code

    Import

    • Navigation: The navigation component.
    • NavigationItem: A helper component designed to represent an item inside a navigation list.

    Basic usage

    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>
  );
};