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 ▼

✏️ Edit

📋 Duplicate

🗑️ Delete

---

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