Navigation - Skeleton

  1. components
  2. navigation
  3. react

Navigation

Provides navigation inerfaces for large, medium, and small screens.

Rail

  • Recommended for medium to large screens.
  • Ideal for horizontal screen layouts.
  • Should be fixed to the left or right of the viewport.
  • Supports 3-7 tiles.

Expanded Mode

Apply the expanded property to enable expanded mode. Each tile will resize and used the expanded label.

Bar

  • Recommended for small screens.
  • Ideal for vertical screen layouts.
  • Should be fixed to the bottom of the viewport.
  • Supports 3-5 tiles.
  • Consider progressive enhancement with the Virtual Keyboard API.

(Content)

Tiles

Tiles are universal between Rails and Bars. They default to buttons, but will convert to anchors when an href is provided. When implementing value for selection, each item will reflect the active state automatically. If you wish to set this state manually, use the selected property.

Anchor

API Reference

NavCommon

Property Type Description
value
string
base
string
Set base styles.
background
string
Set background classes.
padding
string
Set padding classes.
width
string
Set width classes.
widthExpanded
string
Set width classes for expanded mode.
height
string
Set width classes.
classes
string
Provide arbitrary CSS classes.
tilesBase
string
Set base classes.
tilesFlexDirection
string
Set flex direction classes.
tilesJustify
string
Set flex justify classes.
tilesItems
string
Set flex align classes.
tilesGap
string
Set gap classes.
tilesClasses
string
Provide arbitrary CSS classes.
onChange
Triggers when selection occurs.

NavBar

Property Type Description
children
ReactNode
The default children.
value
string
base
string
Set base styles.
background
string
Set background classes.
padding
string
Set padding classes.
width
string
Set width classes.
widthExpanded
string
Set width classes for expanded mode.
height
string
Set width classes.
classes
string
Provide arbitrary CSS classes.
tilesBase
string
Set base classes.
tilesFlexDirection
string
Set flex direction classes.
tilesJustify
string
Set flex justify classes.
tilesItems
string
Set flex align classes.
tilesGap
string
Set gap classes.
tilesClasses
string
Provide arbitrary CSS classes.
onChange
Triggers when selection occurs.

NavRail

Property Type Description
expanded
boolean
Enabled expanded mode.
headerBase
string
Set base classes.
headerFlexDirection
string
Set flex direction classes.
headerJustify
string
Set flex justify classes.
headerItems
string
Set flex align classes.
headerGap
string
Set gap classes.
headerClasses
string
Provide arbitrary CSS classes.
footerBase
string
Set base classes.
footerFlexDirection
string
Set flex direction classes.
footerJustify
string
Set flex justify classes.
footerItems
string
Set flex align classes.
footerGap
string
Set gap classes.
footerClasses
string
Provide arbitrary CSS classes.
header
ReactNode
The header child node.
children
ReactNode
The tiles child node.
footer
ReactNode
The footer child node.
value
string
base
string
Set base styles.
background
string
Set background classes.
padding
string
Set padding classes.
width
string
Set width classes.
widthExpanded
string
Set width classes for expanded mode.
height
string
Set width classes.
classes
string
Provide arbitrary CSS classes.
tilesBase
string
Set base classes.
tilesFlexDirection
string
Set flex direction classes.
tilesJustify
string
Set flex justify classes.
tilesItems
string
Set flex align classes.
tilesGap
string
Set gap classes.
tilesClasses
string
Provide arbitrary CSS classes.
onChange
Triggers when selection occurs.

NavTile

Property Type Description
id
string
Provide a unique ID.
href
string
Provide an href link; turns Tiles into an anchor
target
string
Set the href target attribute.
label
string
Provide the label text.
labelExpanded
string
Provide a longer label in expanded mode.
title
string
Provile a title attribute.
selected
boolean
Enable the active selected state.
type
"button" | "submit" | "reset"
Set button type.
base
string
Set base styles.
width
string
Set width classes.
aspect
string
Set aspect ratio classes.
background
string
Set background classes.
hover
string
Set hover classes.
active
string
Set active classes.
padding
string
Set padding classes.
gap
string
Set gap classes.
rounded
string
Set rounded classes.
classes
string
Provide arbitrary CSS classes.
expandedPadding
string
Set padding classes for expanded mode.
expandedGap
string
Set gap classes for expanded mode.
expandedClasses
string
Provide arbitrary CSS classes for expanded mode.
labelBase
string
Set base classes.
labelClasses
string
Provide arbitrary CSS classes.
labelExpandedBase
string
Set base classes.
labelExpandedClasses
string
Provide arbitrary CSS classes.
onClick
Triggers when the tile is clicked.
children
ReactNode
The default children.