Style Guide
Navigation
MemberPulse navigation patterns - tabs, pills, breadcrumbs, and menus
Navigation
Navigation patterns help users move through the application and understand their current location.
Tabs
Basic Tabs
Overview
Members
Events
Settings
Tab content goes here...
Tab Styling
.tab {
padding: 0.75rem 1.5rem;
color: var(--muted-foreground);
border-bottom: 2px solid transparent;
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
}
.tab:hover {
color: var(--foreground);
}
.tab.active {
color: var(--primary);
border-bottom-color: var(--primary);
}Tabs with Icons
📊 Dashboard
👥 Members
📅 Events
Tabs with Badges
All
Pending 12
Active 847
Pills / Segmented Control
Basic Pills
Day
Week
Month
Year
Pill Styling
.pill-group {
display: inline-flex;
background-color: var(--muted);
border-radius: 0.5rem;
padding: 0.25rem;
}
.pill {
padding: 0.5rem 1rem;
border-radius: 0.375rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
}
.pill.active {
background-color: var(--primary);
color: white;
}Outline Pills
All
Active
Pending
Expired
Breadcrumbs
Basic Breadcrumbs
Home/Members/John Smith
Breadcrumbs with Icons
🏠›Members›Active›John Smith
Collapsed Breadcrumbs
Home/.../Events/Annual Conference 2025
Sidebar Navigation
Basic Sidebar
Main Menu
📊 Dashboard
👥 Members
📅 Events
📚 Courses
Settings
⚙️ Settings
❓ Help
Collapsible Sidebar Items
👥 Members▼
All Members
Active
Pending
Expired
Pagination
Basic Pagination
←
1
2
3
...
10
→
Simple Pagination
Page 1 of 10
Previous
Next
Dropdown Menu
Actions ▼
Navigation Guidelines
Tab Usage
- Use tabs for switching between related views
- Keep tab labels short (1-2 words)
- Limit to 5-7 tabs maximum
- First tab should be the most common view
Breadcrumb Best Practices
- Always show the full path when possible
- Make all items except current clickable
- Use "..." for deep hierarchies
- Consider hiding on mobile
Sidebar Organization
- Group related items together
- Use icons for quick recognition
- Highlight active item clearly
- Support keyboard navigation
Mobile Navigation
- Use hamburger menu for mobile
- Bottom navigation for core actions
- Swipeable tabs work well on mobile
- Ensure touch targets are 44px minimum