React Suite Breadcrumb Accessibility

React Suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application. 

In this article, we’ll learn about React suite Breadcrumb Accessibility. Breadcrumb is used to display the current page path and that too within a navigational hierarchy. Accessibility is a tool or a way that enables a website accessible easily by the user by providing features like buttons, breadcrumbs, checkboxes or dropdowns, etc.

Breadcrumb Props

• classPrefix: It is used to denote the prefix of the component CSS class.
• as: It is used for the custom element type.
• locale: It is used for locale text.
• maxItems: It is used to set the maximum number of breadcrumbs to display.
• onExpand: It is a function that is triggered when you are in the collapsed view and clicks the ellipsis.
• separator: It is used for the custom separator.

Breadcrumb.Item Props

• active: It is used to denote the active state.
• as: It is used for the custom element type.
• componentClass: It is used for the custom element for this component.
• renderItem: It is used for the custom rendering item.

Syntax:

<Breadcrumb>
    <Breadcrumb.Item href="/">...</Breadcrumb.Item>
    <Breadcrumb.Item href="/page">...</Breadcrumb.Item>
    <Breadcrumb.Item aria-current="page" 
        href="/page/breadcrumb">...</Breadcrumb.Item>
</Breadcrumb>

Creating React Application And Installing Module:

Step 1: Create a React application using the given command:

npm create-react-app projectname

Step 2: After creating your project, move to it using the given command:

cd projectname

Step 3: Now Install the rsuite node package using the given command:

npm install rsuite

Project Structure: Now your project structure should look like the following:

Example 1: The below example demonstrates the aria-label state usage in the breadcrumb component.

Javascript

import { Breadcrumb } from "rsuite";
import "rsuite/dist/rsuite.min.css";

export default function App() {
    return (
        <div>
            <div style={{ textAlign: "center" }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                    React Suite Breadcrumb Accessibility
                </h4>
            </div>
            <div style={{ padding: 20, textAlign: "center" }}>
                <div style={{ width: 300 }}>
                    <Breadcrumb>
                        <Breadcrumb.Item href="/">
                         Home
                        </Breadcrumb.Item>
                        <Breadcrumb.Item href="/Practice">
                         Practice
                        </Breadcrumb.Item>
                        <Breadcrumb.Item active
                         aria-label="Problem of the Day">
                          POTD
                        </Breadcrumb.Item>
                    </Breadcrumb>
                </div>
            </div>
        </div>
    );
}

Output:

Example 2: The below example demonstrates the aria-current state set to page in the breadcrumb component.

Javascript

import { Breadcrumb } from "rsuite";
import "rsuite/dist/rsuite.min.css";

export default function App() {
    return (
        <div>
            <div style={{ textAlign: "center" }}>
                <h2>GeeksforGeeks</h2>
                <h4 style={{ color: "green" }}>
                 React Suite Breadcrumb Accessibility
                </h4>
            </div>
            <div style={{ padding: 20, textAlign: "center" }}>
                <div style={{ width: 300 }}>
                    <Breadcrumb>
                        <Breadcrumb.Item href="/">
                         Home
                        </Breadcrumb.Item>
                        <Breadcrumb.Item href="/Practice">
                         Practice
                        </Breadcrumb.Item>
                        <Breadcrumb.Item aria-current="page"
                         href="/Practice/POTD">
                            POTD
                        </Breadcrumb.Item>
                    </Breadcrumb>
                </div>
            </div>
        </div>
    );
}

Output:

Reference: https://rsuitejs.com/components/breadcrumb/#accessibility