# Side Navigation A persistent sidebar navigation component with three sections: header (module switcher), scrollable body (tree menu), and footer (user context). ## Visual Structure ``` ga-side-navigation ├── ga-side-navigation__header │ ├── ga-side-navigation__switcher [--active] │ │ ├── ga-side-navigation__switcher-title │ │ └── ga-side-navigation__switcher-action │ ├── ga-side-navigation__switcher-dropdown (optional, shown when switcher is active) │ │ ├── ga-side-navigation__switcher-dropdown-header (optional) │ │ └── ga-side-navigation__switcher-dropdown-item │ │ ├── ga-side-navigation__switcher-dropdown-title │ │ └── ga-side-navigation__switcher-dropdown-external (optional) │ └── ga-input.ga-side-navigation__search (optional, uses ga-input with custom overrides) │ └── ga-side-navigation__search-shortcut (optional, keyboard shortcut badge) ├── ga-side-navigation__body │ ├── ga-side-navigation__item [--active|--disabled|--level-2|--level-3|--level-4] │ │ ├── ga-side-navigation__item-icon (optional, expand/collapse chevron for parents or decorative icon) │ │ ├── ga-side-navigation__item-content │ │ │ ├── ga-side-navigation__item-label │ │ │ └── ga-side-navigation__item-description (optional) │ │ └── ga-side-navigation__item-external (optional) │ ├── ga-side-navigation__recent-title (optional) │ ├── ga-side-navigation__recent-item │ │ ├── ga-side-navigation__recent-item-icon (optional) │ │ └── ga-side-navigation__recent-item-content │ │ ├── ga-side-navigation__recent-item-label │ │ └── ga-side-navigation__recent-item-description (optional) │ ├── ga-side-navigation__search-results-title (optional) │ └── ga-side-navigation__search-results-item │ ├── ga-side-navigation__search-results-item-content │ │ ├── ga-side-navigation__search-results-item-label │ │ └── ga-side-navigation__search-results-item-description (optional) │ └── ga-side-navigation__search-results-item-external (optional) └── ga-side-navigation__footer ├── ga-side-navigation__footer-dropdown (optional, shown when user is active) │ └── ga-side-navigation__footer-dropdown-item [--disabled] │ ├── ga-side-navigation__footer-dropdown-icon (optional) │ └── ga-side-navigation__footer-dropdown-title └── ga-side-navigation__user [--active] ├── ga-side-navigation__user-avatar ├── ga-side-navigation__user-name └── ga-side-navigation__user-action ``` ## Elements Hierarchy ### Core Block - `ga-side-navigation` - Main container, full-height sidebar layout ### Header - `ga-side-navigation__header` - Top section, vertical stack for switcher and other elements (e.g., search) - `ga-side-navigation__switcher` - Module switcher row - `ga-side-navigation__switcher-title` - Module name - `ga-side-navigation__switcher-action` - Chevron icon indicating the switcher can be toggled - `ga-side-navigation__switcher-dropdown` - Dropdown container, absolutely positioned below the switcher - `ga-side-navigation__switcher-dropdown-header` - Dropdown heading (e.g., "Choose a service") - `ga-side-navigation__switcher-dropdown-item` - Individual module option - `ga-side-navigation__switcher-dropdown-title` - Module name - `ga-side-navigation__switcher-dropdown-external` - External link icon (optional) - `ga-side-navigation__search` - Modifier applied alongside `ga-input` to override styles. Uses standard `ga-input` structure internally. - `ga-side-navigation__search-shortcut` - Keyboard shortcut badge inside the search input ### Body - Navigation Items - `ga-side-navigation__body` - Scrollable content area for navigation items - `ga-side-navigation__item` - Individual navigation item - `ga-side-navigation__item-icon` - Icon for the item (expand/collapse chevron for parents, or decorative icon; not both) - `ga-side-navigation__item-content` - Wrapper for text content - `ga-side-navigation__item-label` - Primary text - `ga-side-navigation__item-description` - Secondary text - `ga-side-navigation__item-external` - External link icon, positioned far right (optional) ### Body - Recently Viewed - `ga-side-navigation__recent-title` - Section heading (e.g., "Recently viewed") - `ga-side-navigation__recent-item` - Individual recently viewed item - `ga-side-navigation__recent-item-icon` - Icon for the item - `ga-side-navigation__recent-item-content` - Wrapper for text content - `ga-side-navigation__recent-item-label` - Primary text - `ga-side-navigation__recent-item-description` - Secondary text (e.g., breadcrumb path) ### Body - Search Results - `ga-side-navigation__search-results-title` - Section heading (e.g., "Search results") - `ga-side-navigation__search-results-item` - Individual search result item - `ga-side-navigation__search-results-item-content` - Wrapper for text content - `ga-side-navigation__search-results-item-label` - Primary text - `ga-side-navigation__search-results-item-description` - Secondary text (e.g., breadcrumb path) - `ga-side-navigation__search-results-item-external` - External link icon, positioned far right (optional) ### Footer - `ga-side-navigation__footer` - Positioning container for user row and its dropdown - `ga-side-navigation__user` - User context row, tabbable and hoverable - `ga-side-navigation__user-avatar` - User avatar image - `ga-side-navigation__user-name` - User display name - `ga-side-navigation__user-action` - Chevron icon - `ga-side-navigation__footer-dropdown` - Dropdown container, positioned upward above the footer - `ga-side-navigation__footer-dropdown-item` - Individual dropdown option - `ga-side-navigation__footer-dropdown-icon` - Item icon (optional) - `ga-side-navigation__footer-dropdown-title` - Option label ### Modifiers - `ga-side-navigation__item--active` - Currently selected navigation item - `ga-side-navigation__item--expanded` - Expanded parent item (shows children) - `ga-side-navigation__item--disabled` - Non-interactive item - `ga-side-navigation__item--level-2` - Second-level tree item - `ga-side-navigation__item--level-3` - Third-level tree item - `ga-side-navigation__item--level-4` - Fourth-level tree item - `ga-side-navigation__item--level-5` - Fifth-level tree item (not recommended to go beyond level 4 for usability reasons, but supported by styles) - `ga-side-navigation__item--level-6` - Sixth-level tree item (not recommended to go beyond level 4 for usability reasons, but supported by styles) ## Examples ### Default ```html
Dashboard
⌘ K
My overview
Recently viewed
Insights
Business Intelligence › Analytics
Voucher registration
Finance › Accounts
Stock count
Warehouse › Inventory management › St...
My approvals
Approval › My tasks
Avatar Anna Andersson
``` ### Search Results ```html
Dashboard
⌘ K
3 results
Voucher registration
Finance › Accounts
Voucher overview
Finance › Reports
Templates for Voucher
Finance › Settings
Avatar Anna Andersson
``` ### Minimal ```html
App
Home
Settings
Avatar Anna Andersson
``` ### With Tree Menu ```html
Finance
Settings
General ledger
Journal entries
Account balances
Level 4 label
Level 5 label
Level 6 label
Accounts payable
Reporting
Settings
Archive
Avatar Anna Andersson
``` ### Switcher Open ```html
Dashboard
Choose a service
Finance
Analytics
HR
Home
Settings
Avatar Anna Andersson
``` ### Footer Open ```html
Dashboard
Home
Settings
Profile
Settings
Log out
Avatar Anna Andersson
```