Norbielink uses a collapsible side navigation drawer as the primary navigation pattern. The active item uses a purple gradient pill. A persistent top bar contains search and partner branding.
Collapsed sidebar
When collapsed, only icons are shown. Hovering reveals a tooltip with the item label. Active state maintains the purple gradient pill — scaled to a circle.
Avatar
User avatars use initials on a solid purple background. Four sizes are available across the system.
JS
XL — 56px
Profile page
JS
LG — 44px
Dropdown header
JS
MD — 36px
Sidebar user row
JS
SM — 28px
Table rows, inline
Specs
| Element | Value |
|---|---|
| Sidebar width (expanded) | 245px |
| Sidebar width (collapsed) | 72px |
| Sidebar background | #191D35 (dark-sidebar) |
| Nav item shape | shape.full (pill) |
| Nav item height | 40px |
| Nav item margin | 2px 8px (8px horizontal inset) |
| Active background | linear-gradient(to bottom, #191D35, #582A75, #9D37BC) |
| Active border | 1px solid rgba(166,20,195,0.8) |
| Active shadow | 0 0 8px rgba(166,20,195,0.5) |
| Active icon color | #A614C3 |
| Top bar height | 56px |
| Top bar background | #0F1120 |