Skip Link

Allow users to skip directly to different sections of the page, by passing repetitive navigation elements such as menus or headers.

React

Is new design vision part implemented using new tokens?

Up to date

Resources

Storybook

React guidance

Source

GitHub code

Example

Storybook failed to load. Please connect to the VPN to access.


                                                        
                                                        
                                                            import { SkipLinks } from '@optimus-web/core';
                                                        
                                                        <SkipLinks
                                                            label="Skip links:"
                                                            list={
                                                            [
                                                                { text: 'Nav', link: '#nav' },
                                                                { text: 'Main', link: '#main' },
                                                                { text: 'Footer', link: '#footer' },
                                                            ]
                                                        } />

API

Name	Description	Type	Default
label	The label for the skip links.	ReactNode	-
list	An array of skip link items	SkipLinkListItemProps[]	-