# Breadcrumb Breadcrumbs are a secondary navigation aid showing a user\'s location in a website\'s hierarchy, appearing as a trail of links (e.g., Home > Category > Subcategory > Current Page) to help users understand where they are and easily backtrack to previous levels. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-breadcrumb--introduction ## Variants documented in Storybook - StandardBreadcrumbs: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-breadcrumb--standardbreadcrumbs - DropdownBreadcrumbs: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-breadcrumb--dropdownbreadcrumbs ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Breadcrumb. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Dropdown Breadcrumbs — Chevron Breadcrumb with dropdown HTML: ```html ``` React: ```jsx import React from 'react'; const BreadcrumbExample1Demo = () => ( <> {/* Variant: Dropdown Breadcrumb - Chevron Divider */} ); export default BreadcrumbExample1Demo; ``` Angular: ```html ``` ### 2. Dropdown Breadcrumbs — Forward slash Breadcrumb with dropdown HTML: ```html ``` React: ```jsx import React from 'react'; const BreadcrumbExample2Demo = () => ( <> {/* Variant: Dropdown Breadcrumb - Slash Divider */} ); export default BreadcrumbExample2Demo; ``` Angular: ```html ``` ### 3. Introduction — Introduction HTML: ```html
Components

Breadcrumbs

Breadcrumbs are a secondary navigation aid showing a user's location in a website's hierarchy, appearing as a trail of links (e.g., Home > Category > Subcategory > Current Page) to help users understand where they are and easily backtrack to previous levels.

Breadcrumb Variants

Breadcrumb With Chevron Icon

Breadcrumb With Forword Slash Divider

Chevron Breadcrumb with dropdown

Forward slash Breadcrumb with dropdown

CSS Class Reference

Utility classes for breadcrumb dividers and structure.

Dividers

Chevron Divider (›) ux4g-breadcrumb-divider
Slash Divider (/) ux4g-breadcrumb-icon

Dropdown Layout

Dropdown Container ux4g-breadcrumb-dropdown
Dropdown Toggle ux4g-breadcrumb-toggle
Dropdown Menu (UL) ux4g-breadcrumb-menu
Menu Link (A) ux4g-breadcrumb-menuitem
``` React: ```jsx import React from 'react'; const BreadcrumbExample3Demo = () => ( <>
Components

Breadcrumbs

Breadcrumbs are a secondary navigation aid showing a user's location in a website's hierarchy, appearing as a trail of links (e.g., Home > Category > Subcategory > Current Page) to help users understand where they are and easily backtrack to previous levels.

Breadcrumb Variants

Breadcrumb With Chevron Icon

Breadcrumb With Forword Slash Divider

Chevron Breadcrumb with dropdown

Forward slash Breadcrumb with dropdown

CSS Class Reference

Utility classes for breadcrumb dividers and structure.

{/* Divider Classes */}

Dividers

Chevron Divider (›) ux4g-breadcrumb-divider
Slash Divider (/) ux4g-breadcrumb-icon
{/* Dropdown Classes */}

Dropdown Layout

Dropdown Container ux4g-breadcrumb-dropdown
Dropdown Toggle ux4g-breadcrumb-toggle
Dropdown Menu (UL) ux4g-breadcrumb-menu
Menu Link (A) ux4g-breadcrumb-menuitem
); export default BreadcrumbExample3Demo; ``` Angular: ```html
Components

Breadcrumbs

Breadcrumbs are a secondary navigation aid showing a user's location in a website's hierarchy, appearing as a trail of links (e.g., Home > Category > Subcategory > Current Page) to help users understand where they are and easily backtrack to previous levels.

Breadcrumb Variants

Breadcrumb With Chevron Icon

Breadcrumb With Forword Slash Divider

Chevron Breadcrumb with dropdown

Forward slash Breadcrumb with dropdown

CSS Class Reference

Utility classes for breadcrumb dividers and structure.

Dividers

Chevron Divider (›) ux4g-breadcrumb-divider
Slash Divider (/) ux4g-breadcrumb-icon

Dropdown Layout

Dropdown Container ux4g-breadcrumb-dropdown
Dropdown Toggle ux4g-breadcrumb-toggle
Dropdown Menu (UL) ux4g-breadcrumb-menu
Menu Link (A) ux4g-breadcrumb-menuitem
``` ### 4. Standard Breadcrumbs — Breadcrumb With Chevron Icon HTML: ```html ``` React: ```jsx import React from 'react'; const BreadcrumbExample4Demo = () => ( <> {/* Variant: Standard Breadcrumb - Chevron Divider */} ); export default BreadcrumbExample4Demo; ``` Angular: ```html ``` ### 5. Standard Breadcrumbs — Breadcrumb With Forword Slash Divider HTML: ```html ``` React: ```jsx import React from 'react'; const BreadcrumbExample5Demo = () => ( <> {/* Variant: Standard Breadcrumb - Slash Divider */} ); export default BreadcrumbExample5Demo; ``` Angular: ```html ``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.