Using the Tabindex Attribute in Navigation Bars with HTML & CSS

Last Updated : 30 Sep, 2024

The tabindex attribute is used to specify the order in which elements receive focus when the “tab” key is pressed. This allows for improved accessibility and control over the focus order for interactive elements on a webpage.

What is tabindex?

The tabindex attribute controls whether an element can be focused using the keyboard, particularly through sequential focus navigation (via the “tab” key). It also determines the order in which focus moves between elements on the page.

Syntax:

<element tabindex="number">

Example: In this example above, pressing the “tab” key will focus the elements in the order: Article 1 → Article 2 → Article 3, based on their tabindex values.

HTML

<div tabindex = "0"><p>GFG Article 1</P></div>
<div tabindex = "1"><p>GFG Article 2</P></div>
<div tabindex = "2"><p>GFG Article 3</P></div>

Note:

If tabindex is set to -1, the element becomes unfocusable through tab navigation. For instance, the following link will not be reachable via the “tab” key:

Navigation Bars

Navigation bars are a crucial part of any website, providing links to various sections or pages. They are often used to organize and streamline the user experience.

There are two main types of navigation bars:

Vertical Navigation Bars
Horizontal Navigation Bars

1. Vertical Navigation Bars

A vertical navigation bar arranges its links one below the other, usually along the side of the webpage. Here’s an example of how to create a simple vertical navigation bar using HTML and CSS.

Examples:

HTML

<html>

<head>
    <meta charset="UTF-8">
    <title>You Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 20%;
            background-color: white;
            position: fixed;
            height: 25%;
            overflow: hidden;
        }

        li a {
            display: block;
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
        }

        .hme {
            background-color: #4CB96B;
        }
    </style>
</head>

<body>
    <ul>
        <li><a class="hme" href="#" tabindex="2">Home</a></li>
        <li><a href="#" tabindex="1">Blog</a></li>
        <li><a class="hme" href="#" tabindex="4">About Us</a></li>
        <li><a href="#a" tabindex="3">Contact Us</a></li>
    </ul>
</body>

</html>

Output:

Vertical Navigation Bars

2. Horizontal Navigation Bars

A horizontal navigation bar arranges its links side by side, typically across the top of the webpage. Below is an example of a basic horizontal navigation bar.

Example:

HTML

<html>

<head>
    <meta charset="UTF-8">
    <title>You Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            background-color: white;
            height: 25%;
            overflow: hidden;
        }

        li {
            float: left;
        }

        li a {
            display: block;
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
        }

        .hme {
            background-color: #4CB96B
        }
    </style>
</head>

<body>
    <ul>
        <li><a class="hme" href="#" tabindex="1">Home</a></li>
        <li><a href="#" tabindex="2">Blog</a></li>
        <li><a class="hme" href="#" tabindex="3">About Us</a></li>
        <li><a href="#" tabindex="4">Contact Us</a></li>
    </ul>
</body>

</html>

Output:

Horizontal Navigation Bars

Advanced Selectors in CSS

kundankumarjha

Improve

Article Tags :

Using the Tabindex Attribute in Navigation Bars with HTML & CSS

What is tabindex?

Navigation Bars

1. Vertical Navigation Bars

2. Horizontal Navigation Bars

Similar Reads

Thank You!

What kind of Experience do you want to share?