Quick Nav

The quick nav component allows navigation inside a page. It renders the links according to the headings of the content in order to navigate to each section. The navigation is done using the link label or the link label plus sublink label when it is a sublink. If there is any space, it will be replaced by '-'.

Anatomy

1.
Title (Optional)
2.
Links
3.
Sublinks (Optional)

Design tokens

Color

Component token	Element	Core token	Value
`fontColor`	Link	`color-grey-700`	#666666
`hoverFontColor`	Link	`color-purple-600`	#7d2fd0
`dividerBorderColor`	Divider	`color-grey-400`	#bfbfbf

Typography

Property	Element	Core token	Value
`fontFamily`	Link	`font-family-sans`	Open Sans, sans-serif
`fontSize`	Link	`font-scale-02`	0.875rem
`fontStyle`	Link	`font-normal`	normal
`fontWeight`	Link	`font-regular`	400

Spacing

Property	Element	Core token	Value
`paddingTop`	Content	`spacing-3`	0.5rem / 8px
`paddingBottom`	Content	`spacing-3`	0.5rem / 8px
`paddingLeft`	Content	`spacing-5`	1rem / 16px
`paddingRight`	Content	`spacing-5`	1rem / 16px

Border

Property	Element	Core token	Value
`focusBorderColor`	Link	`color-blue-600`	#0095ff
`focusBorderStyle`	Link	`border-style-solid`	solid
`focusBorderThickness`	Link	`border-radius-small`	0.125rem / 2px
`focusBorderRadius`	Link	`border-radius-small`	0.125rem / 2px

Specifications
Anatomy
Design tokens

Edit this page on GitHub

Report an issue on GitHub

Progress Bar

NextRadio Group