Skip to main content

Navigation — Vivid Component

Component for primary navigation in applications, providing different variants for different types of navigation complexity.

Installation​

$ yarn add @rexlabs/button

Usage​

import {
  useNavigation,
  NavigationProvider,
  Breakpoints,
  Menu,
  SubMenu,
  Navigation,
  TopBar
} from '@rexlabs/navigation';

Upgrade Guide​

Version 1.x to 2.0.0​

Updated components

  • TopTierNavigation - Removed and replaced by the Menu component
  • SecondTierNavigation - Removed and replaced by the SubMenu component
  • TwoTierNavigation - Removed and replaced by the Navigation component

Updated props

  • items - API is slightly different, the main differences being the isTitle and isHeading attributes are removed
    • Headings are now defined within the the items by using the SubSection type, with the heading defined by the label attribute of that section (see new item types below)

Added props

  • Title - The Navigation component now has a Title prop that will handle the rendering of the title part of the menu (previously handled by an item with the isTitle attribute)

Updated types

// New item types

interface SubItem {
  to?: RouteDefinition;
  label: string;
  activeMatches?: RouteDefinition[];
  onClick?: () => void;
  Icon?: ComponentType<any>;
  Suffix?: ComponentType<any>;
}

interface SubSection {
  label: string;
  items: SubItem[];
  Icon?: ComponentType<any>;
  Suffix?: ComponentType<any>;
}

type SubItems = (SubItem | SubSection)[];

interface Item {
  id: string;
  label: string;
  to?: RouteDefinition;
  isBottom?: boolean;
  subItems?: SubItems;
  activeMatches?: RouteDefinition[];
  Icon: ComponentType<any>;
}

Copyright (c) 2020 Rex Software All Rights Reserved.