collapsible- Type
"icon" | "none"- Default
"none"- Description
- Collapsing behavior standard for small displays.
Components / Navigation
App Sidebar
வழிசெலுத்தல் பட்டை
A collapsible desktop sidebar and responsive mobile overlay drawer component that manages system navigation and user profiles.
பயன்பாட்டின் முகப்பில் பயன்படுத்தப்படும் மடிக்கக்கூடிய வழிசெலுத்தல் மற்றும் விவரப் பட்டை.
Part of Ration Shop POS Block
This component is featured in the comprehensive Ration Shop Point of Sale block pattern.
Desktop Preview
Component preview
App Sidebar — Desktopவழிசெலுத்தல் பட்டை — கணினிMobile Drawer Preview
On small screens the sidebar becomes a slide-in overlay drawer. Tap the hamburger menu button to open it.
Component preview
App Sidebar — Mobile Drawerவழிசெலுத்தல் பட்டை — கைபேசிAnatomy
Structure
Anatomy
3 parts documented for implementation and review.
1
Sidebar Header
வழிசெலுத்தல் தலைப்புrequired<div>Contains logo symbol and branding text, plus the collapse action button.
2
Navigation Items List
வழிசெலுத்தல் இணைப்புகள்required<nav>List of navigation link items showing custom icons and descriptive labels in selected languages.
3
Operator Details Card
அங்கீகரிக்கப்பட்ட விவர அட்டை<div>Bottom visual card summarizing the logged operator details (name, code, zone details).
API
Props
className- Type
string- Default
- -
- Description
- Style overrides.
| Prop | Type | Default | Description |
|---|---|---|---|
collapsible | "icon" | "none" | "none" | Collapsing behavior standard for small displays. |
className | string | - | Style overrides. |
Best practices
Include descriptive icon tooltips
விளக்கக் குறிப்புகளை வழங்குங்கள்
Provide tooltips with text labels when the sidebar is collapsed to guide users navigating via icons only.
பட்டி சுருக்கப்பட்டிருக்கும் போது, ஒவ்வொரு சின்னத்தின் பயனை விளக்கும் குறிப்புகளைத் தானாகத் தோன்றுமாறு செய்யுங்கள்.
Don't use hardcoded absolute routes
நிலையான வழித்தடங்களை தவிர்க்கவும்
Avoid hardcoding absolute website URLs for default links when deploying the sidebar template in generic applications.
பொதுவான பயன்பாடுகளில் பக்கவாட்டுப் பட்டியைக் கட்டமைக்கும்போது, நிலையான இணைய முகவரிகளை வழங்கக் கூடாது.
Accessibility
- Ensures all navigation items are focusable, providing tooltips displaying labels when the sidebar is collapsed.
- Bilingual labels ensure clear comprehension for both Tamil and English speaking personnel.
- Underlying navigation items are marked with semantic roles, allowing easy keyboard-only traversal.
- Mobile drawer uses
fixed inset-0overlay with a close button and backdrop tap-to-dismiss for accessible dismissal.