Navigation (Horizontal)

A horizontal navigation component for navigating between pages.

See all the examples and details in the Storybook.

Usage

import { NavigationHorizontal } from "@samgl/graffiti-ui";

const MyNavigation = () => {
  return (
    <NavigationHorizontal
      links={[
        {
          text: "Home",
          to: "/",
        },
        {
          text: "Explore",
          to: "/explore",
        },
        {
          text: "Notifications",
          to: "/notifications",
        },
        {
          text: "Messages",
          to: "/messages",
        },
        {
          text: "Bookmarks",
          to: "/bookmarks",
        },
        {
          text: "Profile",
          to: "/profile",
        },
        {
          text: "Settings",
          to: "/settings",
        },
        {
          text: "More",
          to: "/more",
        },
      ]}
    />
  );
};

Props

Prop	Type	Default	Optional	Description
links	NavigationHorizontalProps["links"]		❌	An array of links to display in the navigation.
$linkSize	string	md	✅	The size of the links.
className	string		✅	The class name of the component, generally used when extending the component with a styled component.