Bottom Navigation

A fixed bottom navigation bar used on mobile viewports. It replaces the sidebar on screens below the md breakpoint, providing access to primary navigation and the "New Project" CTA.

Preview

The bottom nav appears on screens below 768px. On larger viewports, the sidebar takes over navigation duties.

Page content area

Behavior

Responsive Visibility

Hidden on md+ screens via md:hidden. Only appears on mobile viewports.

Fixed Positioning

Uses fixed bottom-0 with backdrop blur for a polished, floating feel.

Active State

Active routes are highlighted with primary color and a subtle scale transform on the icon.

CTA Integration

The "New" button uses the same gradient treatment as the sidebar CTA for visual consistency.