Navigation

Components

The Navigation component is a versatile list of buttons or links that can be used to navigate between sections of a page or application

Import

import { Navigation, NavigationItem } from '@outfitio/outkit';

Basic Usage

The Navigation component renders a styled list of buttons.

The buttons (NavigationItem) can be set to isActive or disabled and accept some button props like leftIcon

Note: No isActive logic is stored in the navigation or navigation items, this is to allow the navigation to be used in several situations like both server side and client side routing where what is considered 'active' might change depending on each individual usage

Badges

NavigationItems accept a badge prop for denoting special items.

Advanced Usage

Custom elements

Navigation items can be buttons, anchors, or Components eg: Link.

If a button has an href it is automatically rendered as an a, although this can be set manually by passing in an as prop. eg: as='a'

NavigationItem is nestable, and gains a few extra props when nested.

NavigationItem has its own internal state for handleing collapses, but you can override this by passing in a isOpen prop and/or providing onClose and onOpen callbacks.

Opt out of collapsing nested items

Set if the parent can be minamised with isCollapsable (true by default). Note: isCollapsable={false} only removes the chevron, passing in a value for isOpen will still open and close

Collapse as a secondary action

If a navigationItem has a primary action (href or onClick) the action for collapsing its children will be moved to an icon button to the right of the item

Best Practice

If a navigation item is disabled, indicate the reason. For example, use a Coming Soon badge for an upcoming features.
Avoid having a mixture of some navigation items with and without icons on the same level. It is appropriate, however, if the navigation items are on different nested levels

Props

Property	Type	Required	Default	Description
`activeColor`	`string`	No	`'info'`	The colour to render active top level Navigation Items.
`heading`	`string \| element`	No		Optional heading.
`maxWidth`	`string`	No	`'250px'`	Max width of navigation.
`children`	`any`	No		Children must be NavigationItem Components

NavigationItem

Property	Type	Required	Default	Description
`children`	`any`	Yes		Children to render inside the button or anchor link. Any NavigationItems inlucded as children will be wrapped in an outkit Collapseable component, and the first string child will be used as the button/anchor content
`leftIcon`	`string`	No
`onClick`	`func`	No
`isOpen`	`bool`	No	`true`	Set the collapsed state of the children
`onOpen`	`func`	No		Callback that fires when the nested children are expanded
`onClose`	`func`	No		Callback that fires when the nested children are collapsed
`isCollapsable`	`bool`	No	`true`	Enable/disable the chevrons for collapsing nested NavigationItems
`isActive`	`bool`	No		Style as an active item
`as`	`element \| string`	No		What DOM element to render the navigation as. (defaults to either 'button' or 'a' depending on presence of an 'href' prop)
`badge`	`element`	No		Pass in a <Badge /> to render to the right of the navigation item
`disabled`	`bool`	No		Disable interactive with the NavigationItem
`href`	`string`	No		Passing in an href will automatically set the Navigation from a 'button' to an 'a'

NavigationItem also gets some internal props injected by the Navigation component.

These props are _isTopLevel and _activeColor

_activeColor is the value of the Navigation's activeColor prop.

_isTopLevel lets the NavigationItem know how to style itself as the 'top level' items (direct children of Navigation) get different styling.