bootstrap/site/content/docs/5.2/components/skip-navigation.md

layout, title, description, group, toc, added

layout	title	description	group	toc	added
docs	Skip navigation	Use skip navigation for your keyboard users	components	true	5.3

Overview

Skip navigation can be used for keyboard users in order to skip some items to access more rapidly to the main content of a page. It tends to be used as the first component a user can encounter while navigating to a website after the page is loaded so that the menus can be skipped.

It is possible thanks to our .visually-hidden-focusable and .overflow-hidden utilities.

Basic example

{{< example >}}

Skip to content 1 Skip to content 2

Skip navigation

Click outside this example and then press Tab key multiple time. You'll see our Skip navigation component appears that will get focused and then that will allow you to skip this entire hero section to go either to the first or second content.

Primary button Secondary

Content 1

Content 1 description.

Primary button Secondary

Content 2

Content 2 description.

Primary button Secondary

{{< /example >}}