itemsreq- Type
BreadcrumbItem[]- Default
- -
- Description
- Array of nested links containing labels and targets.
Components / Navigation
Breadcrumb
வழிப்பட்டை
Breadcrumbs show users their current location within a site hierarchy. They help users navigate back to parent sections without using the browser back button.
வழிப்பட்டைகள் தளத்தின் படிநிலையில் பயனர்களின் தற்போதைய இடத்தை காட்டுகின்றன.
Basic breadcrumb
Component preview
Government portal navigationஅரசு வலைதள வழிசெலுத்தல்Collapsed with ellipsis
Component preview
Deep hierarchyஆழமான படிநிலைStructure
Anatomy
5 parts documented for implementation and review.
1
BreadcrumbList
வழிப்பட்டை பட்டியல்required<ol>Ordered list in a <nav> with aria-label=breadcrumb. Provides semantic navigation landmark for screen readers. Uses inline-flex with consistent gap spacing between items.
2
BreadcrumbLink
இணைப்புrequired<a>Ancestor page links rendered at muted color with hover underline. Each link navigates to a parent page. For Tamil breadcrumbs, use Tamil page names with font-tamil class.
3
BreadcrumbSeparator
பிரிப்பான்<li>Visual separator with role=presentation and aria-hidden=true. Default ChevronRight icon at h-3.5 w-3.5. Customizable to /, >, or any character.
4
BreadcrumbPage
தற்போதைய பக்கம்<span>Current page label — not a link. Uses aria-current=page for screen readers. Text rendered at foreground color (not muted) to visually distinguish from ancestor links.
5
BreadcrumbEllipsis
மூன்று புள்ளிகள்Truncation control that collapses intermediate breadcrumb items into an ellipsis (...) on narrow viewports. Shows a dropdown to access collapsed items. Keeps first and last items always visible.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
itemsreq | BreadcrumbItem[] | - | Array of nested links containing labels and targets. |
Best practices
Use BreadcrumbEllipsis to truncate long paths
நீண்ட பாதைகளை BreadcrumbEllipsis மூலம் சுருக்கவும்
Always keep the first and last crumbs visible — collapse intermediate items with an ellipsis to prevent overflow.
முதல் மற்றும் கடைசி உருப்படிகளை எப்போதும் காட்டவும் — இடைப்பட்டவற்றை ellipsis மூலம் சுருக்கவும்.
Don't show 5+ breadcrumbs without truncation
5-க்கும் அதிக வழிப்பட்டை உருப்படிகளை சுருக்கமின்றி காட்டாதே
Long untruncated breadcrumb trails overflow on mobile and clutter the header area on desktop.
5-க்கும் அதிக வழிப்பட்டை உருப்படிகள் மொபைலில் நிரம்பி வழிகின்றன.
Make the last crumb non-clickable (current page)
கடைசி வழிப்பட்டை உருப்படியை கிளிக் செய்ய முடியாதவாறு வைக்கவும்
The current page crumb should use BreadcrumbPage (not BreadcrumbLink) so it's not a link — it represents where you are.
தற்போதைய பக்கம் இணைப்பு அல்ல — BreadcrumbPage பயன்படுத்தி கிளிக் செய்ய முடியாதவாறு வைக்கவும்.
Don't use Breadcrumb on top-level pages
உச்ச நிலை பக்கங்களில் வழிப்பட்டை பயன்படுத்தாதே
The homepage and top-level category pages have no parent — showing a breadcrumb there adds noise without value.
முகப்பு மற்றும் உச்ச நிலை பக்கங்களுக்கு மேல்நிலை இல்லை — வழிப்பட்டை காட்டுவது தேவையற்ற குழப்பத்தை உருவாக்கும்.