> ## Documentation Index
> Fetch the complete documentation index at: https://memberpulseptyltd.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<Card>
  <div style={{borderBottom: '1px solid #E2E8F0'}}>
    <div style={{display: 'flex', gap: '0'}}>
      <div style={{padding: '12px 24px', borderBottom: '2px solid #2421C4', color: '#2421C4', fontWeight: '500', cursor: 'pointer'}}>Overview</div>
      <div style={{padding: '12px 24px', color: '#6C757D', cursor: 'pointer'}}>Members</div>
      <div style={{padding: '12px 24px', color: '#6C757D', cursor: 'pointer'}}>Events</div>
      <div style={{padding: '12px 24px', color: '#6C757D', cursor: 'pointer'}}>Settings</div>
    </div>
  </div>

  <div style={{padding: '24px'}}>
    Tab content goes here...
  </div>
</Card>

### Tab Styling

```css theme={null}
.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

<Card>
  <div style={{borderBottom: '1px solid #E2E8F0'}}>
    <div style={{display: 'flex', gap: '0'}}>
      <div style={{padding: '12px 24px', borderBottom: '2px solid #2421C4', color: '#2421C4', fontWeight: '500', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px'}}>
        <span>📊</span> Dashboard
      </div>

      <div style={{padding: '12px 24px', color: '#6C757D', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px'}}>
        <span>👥</span> Members
      </div>

      <div style={{padding: '12px 24px', color: '#6C757D', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px'}}>
        <span>📅</span> Events
      </div>
    </div>
  </div>
</Card>

### Tabs with Badges

<Card>
  <div style={{borderBottom: '1px solid #E2E8F0'}}>
    <div style={{display: 'flex', gap: '0'}}>
      <div style={{padding: '12px 24px', borderBottom: '2px solid #2421C4', color: '#2421C4', fontWeight: '500', cursor: 'pointer'}}>All</div>

      <div style={{padding: '12px 24px', color: '#6C757D', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px'}}>
        Pending <span style={{backgroundColor: '#F59E0B', color: 'white', padding: '2px 8px', borderRadius: '0', fontSize: '12px'}}>12</span>
      </div>

      <div style={{padding: '12px 24px', color: '#6C757D', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px'}}>
        Active <span style={{backgroundColor: '#10B981', color: 'white', padding: '2px 8px', borderRadius: '0', fontSize: '12px'}}>847</span>
      </div>
    </div>
  </div>
</Card>

***

## Pills / Segmented Control

### Basic Pills

<Card>
  <div style={{padding: '24px'}}>
    <div style={{display: 'inline-flex', backgroundColor: '#F5F5F7', borderRadius: '0', padding: '4px'}}>
      <div style={{padding: '8px 16px', backgroundColor: '#2421C4', color: 'white', borderRadius: '0', fontWeight: '500', cursor: 'pointer'}}>Day</div>
      <div style={{padding: '8px 16px', color: '#6C757D', cursor: 'pointer'}}>Week</div>
      <div style={{padding: '8px 16px', color: '#6C757D', cursor: 'pointer'}}>Month</div>
      <div style={{padding: '8px 16px', color: '#6C757D', cursor: 'pointer'}}>Year</div>
    </div>
  </div>
</Card>

### Pill Styling

```css theme={null}
.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

<Card>
  <div style={{padding: '24px'}}>
    <div style={{display: 'flex', gap: '8px'}}>
      <div style={{padding: '8px 16px', backgroundColor: '#2421C4', color: 'white', borderRadius: '0', fontWeight: '500', cursor: 'pointer'}}>All</div>
      <div style={{padding: '8px 16px', border: '1px solid #E2E8F0', borderRadius: '0', cursor: 'pointer'}}>Active</div>
      <div style={{padding: '8px 16px', border: '1px solid #E2E8F0', borderRadius: '0', cursor: 'pointer'}}>Pending</div>
      <div style={{padding: '8px 16px', border: '1px solid #E2E8F0', borderRadius: '0', cursor: 'pointer'}}>Expired</div>
    </div>
  </div>
</Card>

***

## Breadcrumbs

### Basic Breadcrumbs

<Card>
  <div style={{padding: '16px'}}>
    <div style={{display: 'flex', alignItems: 'center', gap: '8px', fontSize: '14px'}}>
      <span style={{color: '#2421C4', cursor: 'pointer'}}>Home</span>
      <span style={{color: '#6C757D'}}>/</span>
      <span style={{color: '#2421C4', cursor: 'pointer'}}>Members</span>
      <span style={{color: '#6C757D'}}>/</span>
      <span style={{color: '#6C757D'}}>John Smith</span>
    </div>
  </div>
</Card>

### Breadcrumbs with Icons

<Card>
  <div style={{padding: '16px'}}>
    <div style={{display: 'flex', alignItems: 'center', gap: '8px', fontSize: '14px'}}>
      <span style={{color: '#2421C4', cursor: 'pointer'}}>🏠</span>
      <span style={{color: '#6C757D'}}>›</span>
      <span style={{color: '#2421C4', cursor: 'pointer'}}>Members</span>
      <span style={{color: '#6C757D'}}>›</span>
      <span style={{color: '#2421C4', cursor: 'pointer'}}>Active</span>
      <span style={{color: '#6C757D'}}>›</span>
      <span style={{color: '#6C757D'}}>John Smith</span>
    </div>
  </div>
</Card>

### Collapsed Breadcrumbs

<Card>
  <div style={{padding: '16px'}}>
    <div style={{display: 'flex', alignItems: 'center', gap: '8px', fontSize: '14px'}}>
      <span style={{color: '#2421C4', cursor: 'pointer'}}>Home</span>
      <span style={{color: '#6C757D'}}>/</span>
      <span style={{color: '#2421C4', cursor: 'pointer'}}>...</span>
      <span style={{color: '#6C757D'}}>/</span>
      <span style={{color: '#2421C4', cursor: 'pointer'}}>Events</span>
      <span style={{color: '#6C757D'}}>/</span>
      <span style={{color: '#6C757D'}}>Annual Conference 2025</span>
    </div>
  </div>
</Card>

***

## Sidebar Navigation

### Basic Sidebar

<Card>
  <div style={{width: '256px', padding: '16px', borderRight: '1px solid #E2E8F0', minHeight: '400px'}}>
    <div style={{marginBottom: '24px'}}>
      <h3 style={{fontSize: '12px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: '#6C757D', marginBottom: '12px', padding: '0 12px'}}>Main Menu</h3>

      <div style={{display: 'flex', flexDirection: 'column', gap: '2px'}}>
        <div style={{padding: '10px 12px', backgroundColor: '#F0F7FF', color: '#2421C4', borderRadius: '0', fontWeight: '500', display: 'flex', alignItems: 'center', gap: '12px', cursor: 'pointer'}}>
          📊 Dashboard
        </div>

        <div style={{padding: '10px 12px', color: '#374151', borderRadius: '0', display: 'flex', alignItems: 'center', gap: '12px', cursor: 'pointer'}}>
          👥 Members
        </div>

        <div style={{padding: '10px 12px', color: '#374151', borderRadius: '0', display: 'flex', alignItems: 'center', gap: '12px', cursor: 'pointer'}}>
          📅 Events
        </div>

        <div style={{padding: '10px 12px', color: '#374151', borderRadius: '0', display: 'flex', alignItems: 'center', gap: '12px', cursor: 'pointer'}}>
          📚 Courses
        </div>
      </div>
    </div>

    <div>
      <h3 style={{fontSize: '12px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: '#6C757D', marginBottom: '12px', padding: '0 12px'}}>Settings</h3>

      <div style={{display: 'flex', flexDirection: 'column', gap: '2px'}}>
        <div style={{padding: '10px 12px', color: '#374151', borderRadius: '0', display: 'flex', alignItems: 'center', gap: '12px', cursor: 'pointer'}}>
          ⚙️ Settings
        </div>

        <div style={{padding: '10px 12px', color: '#374151', borderRadius: '0', display: 'flex', alignItems: 'center', gap: '12px', cursor: 'pointer'}}>
          ❓ Help
        </div>
      </div>
    </div>
  </div>
</Card>

### Collapsible Sidebar Items

<Card>
  <div style={{width: '256px', padding: '16px'}}>
    <div style={{display: 'flex', flexDirection: 'column', gap: '2px'}}>
      <div>
        <div style={{padding: '10px 12px', color: '#374151', borderRadius: '0', display: 'flex', alignItems: 'center', justifyContent: 'space-between', cursor: 'pointer'}}>
          <span style={{display: 'flex', alignItems: 'center', gap: '12px'}}>👥 Members</span>
          <span>▼</span>
        </div>

        <div style={{marginLeft: '36px', display: 'flex', flexDirection: 'column', gap: '2px', marginTop: '2px'}}>
          <div style={{padding: '8px 12px', color: '#2421C4', fontSize: '14px', cursor: 'pointer'}}>All Members</div>
          <div style={{padding: '8px 12px', color: '#6C757D', fontSize: '14px', cursor: 'pointer'}}>Active</div>
          <div style={{padding: '8px 12px', color: '#6C757D', fontSize: '14px', cursor: 'pointer'}}>Pending</div>
          <div style={{padding: '8px 12px', color: '#6C757D', fontSize: '14px', cursor: 'pointer'}}>Expired</div>
        </div>
      </div>
    </div>
  </div>
</Card>

***

## Pagination

### Basic Pagination

<Card>
  <div style={{padding: '16px', display: 'flex', justifyContent: 'center', gap: '4px'}}>
    <div style={{padding: '8px 12px', border: '1px solid #E2E8F0', borderRadius: '0', cursor: 'pointer'}}>←</div>
    <div style={{padding: '8px 12px', backgroundColor: '#2421C4', color: 'white', borderRadius: '0'}}>1</div>
    <div style={{padding: '8px 12px', border: '1px solid #E2E8F0', borderRadius: '0', cursor: 'pointer'}}>2</div>
    <div style={{padding: '8px 12px', border: '1px solid #E2E8F0', borderRadius: '0', cursor: 'pointer'}}>3</div>
    <div style={{padding: '8px 12px', border: '1px solid #E2E8F0', borderRadius: '0', color: '#6C757D'}}>...</div>
    <div style={{padding: '8px 12px', border: '1px solid #E2E8F0', borderRadius: '0', cursor: 'pointer'}}>10</div>
    <div style={{padding: '8px 12px', border: '1px solid #E2E8F0', borderRadius: '0', cursor: 'pointer'}}>→</div>
  </div>
</Card>

### Simple Pagination

<Card>
  <div style={{padding: '16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
    <span style={{fontSize: '14px', color: '#6C757D'}}>Page 1 of 10</span>

    <div style={{display: 'flex', gap: '8px'}}>
      <div style={{padding: '8px 16px', border: '1px solid #E2E8F0', borderRadius: '0', color: '#6C757D'}}>Previous</div>
      <div style={{padding: '8px 16px', backgroundColor: '#2421C4', color: 'white', borderRadius: '0', cursor: 'pointer'}}>Next</div>
    </div>
  </div>
</Card>

***

## Dropdown Menu

<Card>
  <div style={{padding: '24px', position: 'relative', display: 'inline-block'}}>
    <div style={{padding: '10px 16px', backgroundColor: '#F5F5F7', border: '1px solid #E2E8F0', borderRadius: '0', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px'}}>
      Actions ▼
    </div>

    <div style={{position: 'absolute', top: '100%', left: '24px', marginTop: '4px', backgroundColor: 'white', border: '1px solid #E2E8F0', borderRadius: '0', boxShadow: '0 4px 12px rgba(0,0,0,0.1)', minWidth: '180px', overflow: 'hidden'}}>
      <div style={{padding: '10px 16px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '12px', fontSize: '14px'}}>
        ✏️ Edit
      </div>

      <div style={{padding: '10px 16px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '12px', fontSize: '14px'}}>
        📋 Duplicate
      </div>

      <div style={{height: '1px', backgroundColor: '#E2E8F0'}} />

      <div style={{padding: '10px 16px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '12px', fontSize: '14px', color: '#DC3545'}}>
        🗑️ Delete
      </div>
    </div>
  </div>
</Card>

***

## Navigation Guidelines

<AccordionGroup>
  <Accordion title="Tab Usage" icon="layers">
    * 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
  </Accordion>

  <Accordion title="Breadcrumb Best Practices" icon="navigation">
    * Always show the full path when possible
    * Make all items except current clickable
    * Use "..." for deep hierarchies
    * Consider hiding on mobile
  </Accordion>

  <Accordion title="Sidebar Organization" icon="sidebar">
    * Group related items together
    * Use icons for quick recognition
    * Highlight active item clearly
    * Support keyboard navigation
  </Accordion>

  <Accordion title="Mobile Navigation" icon="smartphone">
    * Use hamburger menu for mobile
    * Bottom navigation for core actions
    * Swipeable tabs work well on mobile
    * Ensure touch targets are 44px minimum
  </Accordion>
</AccordionGroup>