NavigationList

Used to list actions that will either change the current location or trigger an action that visibly changes the page content (for ex. opening a modal with page settings or triggering a confirm dialog before leaving current route).

Exports a NavigationList-component and with two custom list item components with shared interactive styling:

• NavigationListButton - built with Chakra UI Button
• NavigationListLink - built with Chakra UI Link

Note

The NavigationList it rendered as a nav-element by default. For more info on navigation and providing page structure, see The WAI Menu Tutorial on w3.org.

Component usage

import { NavigationList, NavigationListButton, NavigationListLink } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <NavigationList>
      <NavigationListLink href="/" rel="noreferrer noopener" target="_blank">
        Home
      </NavigationListLink>
      <NavigationListButton onClick={console.log}>Change language</NavigationListButton>
      <NavigationListLink href="/" rel="noreferrer noopener" target="_blank">
        Privacy policy
      </NavigationListLink>
      <NavigationListButton onClick={console.log}>Log out</NavigationListButton>
    </NavigationList>
  );
}

⛶

Disabled list item

NavigationListButton and NavigationListLink can both be disabled by passing the isDisabled-prop.

Note that there is no such thing as a disabled link. When passing the isDisabled-prop to NavigationListLink, this will only force the href-attribute to be undefined, which makes the link lead to nowhere.

Usage with Routing library

To use the Link with a routing library like React Router or Reach Router, pass the asChild prop to the <NavigationListLink>. It will replace the rendered a tag.

import { Link as ReactRouterLink } from "react-router-dom";

<NavigationList>
  <NavigationListLink asChild>
    <ReactRouterLink to="/">Home</ReactRouterLink>
  </NavigationListLink>
  <NavigationListLink asChild>
    <ReactRouterLink to="/profile">Profile</ReactRouterLink>
  </NavigationListLink>
</NavigationList>;