“Skip to Main Content” Button
Many modern websites have a consistent set of UI elements at top of every page. The content commonly includes a header with the brand logo and a navigation bar. If a user navigates the same site regularly, they will probably find themselves navigating through these UI elements regularly to get to the main content on the page, which can be tedious and detrimental to the overall user experience. As such, developers started adding a “Skip to Main Content” button to their webpages. These anchor buttons are meant to be used as the first element that a user can tab to when they first load a webpage. In this section, we will learn how to add a “Skip to Main Content” button to our Next.js application.
Create SkipLink
and SkipButton
Components
We will start by creating the custom components needed to render the “Skip to Main Content” button.
Create a SkipLink
directory inside the components
directory. Next, create a SkipLink.tsx
file inside the SkipLink
directory and add the following lines of code to it:
import React from 'react';
interface SkipLinkProperties {
className?: string;
children: React.ReactElement;
/**
* The css query aiding the selection of the
* container (main, section etc) we want to scroll to;
*/
skipTo: string;
}
const SkipLink: React.FC<SkipLinkProperties> = props => {
const onClick = (event: React.SyntheticEvent) => {
event.preventDefault();
const container: (HTMLElement | null) = document.querySelector(props.skipTo);
if (container) {
container.tabIndex = -1;
container.focus();
setTimeout(() => container.removeAttribute("tabindex"), 1000);
}
};
return React.cloneElement(props.children, { onClick, className: props.className });
}
export default SkipLink;
We created a re-usable component that encapsulates the desired “Skip to Main Content” functionality. SkipLink.tsx
includes an onClick
event handler that will be forwarded to any children component nested inside the SkipLink
component. The className
prop of the SkipLink
is used to specify the CSS class and a SkipTo
string containing the CSS query used to determine which component we want to skip to.
Our next step is to create a custom SkipButton
component that we will nest inside the SkipLink
component.
Create a SkipButton.tsx
file inside the SkipLink
directory and add the following lines of code to it:
import {useTheme} from '@mui/material/styles'
import styled from '@emotion/styled'
import MuiButton, {ButtonProps} from '@mui/material/Button'
interface SkipButtonProps extends ButtonProps {
mainColor: string
}
export const SkipButton = styled(MuiButton, {
shouldForwardProp: prop => prop !== 'mainColor',
})<SkipButtonProps>(props => ({
backgroundColor: useTheme().palette.secondary.main, // using the secondary color (heritage gold) as the background color
color: '#262626', // setting the text color to black
// styles used when the button is in focus
"&:focus-visible": {
color: 'white', // the text color should be white
backgroundColor: '#707070', // the background is grey
outline: '2px solid #fdbf57', // the outline is a 2px solid heritage gold line
},
}))
We customized the color and focus behavior of the SkipButton
component to ensure that the focus indicator is visible against the navigation bar.
We will be making use of Sass (Syntactically Awesome Stylesheet), which is an extension of CSS, to ensure that the SkipLink
components slides on the screen from the left-hand side.
Start by installing the sass
package using npm
:
npm i sass
Next, add the Sass styles for the SkipLink
component by creating a SkipLink.module.scss
file inside the styles
directory.
Add the following lines of code SkipLink.modukle.scss
:
// placing the button in the top-right corner and addition a transition animation (sliding)
.skipLink {
margin-right: 1rem !important;
position: absolute !important;
transform: translateX(-200%) !important;
transition: transform 0.3s !important;
&:focus {
position: absolute !important;
transform: translateX(0) !important;
}
}
Finally, we will make use of the SkipLink
and SkipButton
components in the navigation bar. Open the Navbar/Navbar.tsx
file located inside the components
directory and add the following import statements:
import SkipLink from "@/components/SkipLink/SkipLink";
import {SkipButton} from "@/components/SkipLink/SkipButton";
import styles_skip from '@/styles/SkipLink.module.scss'
Add the following lines of code before the <Container maxWidth="xl">
line:
{/* setting the zIndex to 1300 to ensure that the button always renders on top of other component */}
<Box sx={{zIndex: 1300}}>
<SkipLink className={styles_skip.skipLink} skipTo={"main:first-of-type"}>
<SkipButton mainColor={"primary"} sx={{marginTop:2.4, marginLeft:2, color: 'white'}}>Skip to main content</SkipButton>
</SkipLink>
</Box>
The Box
containing the “Skip to Main Content” button has the zIndex
property set to 1300
to ensure that the button always renders on top of other components. We set the className
prop of the SkipLink
component to the style defined in the SkipLink.modue.scss
file. The skipTo
string is set to "main:first-of-type"
, i.e., we want to skip to the first component that has main
as its class.
Save the file and go back your browser, then reload the page. If you encounter errors, simply stop the current running dev
instance by going to the terminal and clicking “Ctrl + C”, then “Y” to confirm.
Once the page is loaded, try pressing the Tab key on your keyboard. The “Skip to Main Content” button should slide from the left-hand side of the navigation bar.
Try pressing the “Enter” key on your keyboard when the “Skip to Main Content” button is shown. You can then press “Tab” again to navigate the main content of the page without going through the navigation bar buttons.