Skip to Main Content
This component is used to allow keyboard users a quick way to skip directly to the main content instead of needing to tab through all navigation items.
This component should not be used if using the LayoutAppBar
component
since it is already built-in.
Simple Example
The default behavior for the SkipToMainContent
component will be to only be
visible to screen readers or once keyboard focused. The user can then press the
Enter key to focus the <main>
element.
Try tabbing into the example below to see the default styles.
import { AppBar } from "@react-md/core/app-bar/AppBar";
import { SkipToMainContent } from "@react-md/core/link/SkipToMainContent";
import { type ReactElement } from "react";
export default function SimpleSkipToMainContentExample(): ReactElement {
return (
<AppBar style={{ position: "relative" }}>
<SkipToMainContent />
</AppBar>
);
}
Custom Focus Target
The SkipToMainContent
can also be used within complex
Dialogs to skip to the main content by providing the
mainId
prop pointing to the id
of an element to focus.
The target element must either be a focusable element or have
tabIndex={-1}
to show it can be programmatically focused. The element might
also need custom focus styles to override the default browser behavior.
Custom Link Styles
The default styles can be configured by changing the
core.$link-skip-to-main-z-index, core.$link-skip-to-main-styles,
and core.$link-skip-to-main-active-styles Sass variables which would be
applied globally. If custom styles are required for a single component, enable
the unstyled
prop to use the default link focus styles instead of the updated
color and outline styles. This might make it easier to enable custom focus
styles.