Navigation Components
Interactive navigation components including navbars, breadcrumbs, tabs, and pagination with comprehensive examples
Top Navigation
Dashboard Overview
Professional navigation with search, notifications, and user menu integration.
E-commerce navigation with search, cart, and wishlist functionality.
Search Integration
Built-in search functionality with keyboard shortcuts and autocomplete.
Notifications
Real-time notification system with badges and dropdown menus.
User Management
User profiles, authentication states, and personalized navigation.
Responsive Design
Mobile-first approach with collapsible menus and touch-friendly interactions.
Top Navigation
import { TopNav } from "~/components/ui";
const navItems = [
{ label: "Home", href: "/", icon: <FaHome /> },
{ label: "About", href: "/about", active: true },
{ label: "Contact", href: "/contact" }
];
<TopNav
brand={<span className="flex items-center space-x-2">
<FaRocket /> <span>Brand</span>
</span>}
items={navItems}
actions={<button className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Sign In</button>}
/>Breadcrumbs
Breadcrumbs
import { Breadcrumbs } from "~/components/ui";
<Breadcrumbs
items={[
{ label: "Home", href: "/" },
{ label: "Projects", href: "/projects" },
{ label: "Current Project" }
]}
/>Tab Navigation
Underline Style
Clean underline style perfect for form-based interfaces and settings pages.
Pill Style
Rounded pill style ideal for filter interfaces and status toggles.
Vertical Tabs
Dashboard Overview
Vertical tabs work great for sidebar layouts and detailed content sections.
With Icons & Badges
Enhanced tabs with icons and notification badges for better visual hierarchy.
Smooth Transitions
CSS animations provide seamless tab switching with visual feedback.
Accessibility
Keyboard navigation and ARIA labels ensure inclusive user experiences.
Flexible Layout
Horizontal, vertical, and various styling options for different use cases.
Rich Content
Support for icons, badges, and complex content within tab interfaces.
Tab Navigation
import { TabNav } from "~/components/ui";
<TabNav
items={[
{ label: "Overview", href: "#overview", active: true },
{ label: "Settings", href: "#settings" },
{ label: "Team", href: "#team", icon: <FaUsers /> }
]}
/>Pagination
Current page: 2 of 5
Sidebar Navigation
import { SideNav } from "~/components/ui";
<SideNav
header={<div className="text-xl font-bold">Dashboard</div>}
items={[
{ label: "Dashboard", href: "#", icon: <FaHome />, active: true },
{ label: "Projects", href: "#", icon: <FaBriefcase /> }
]}
footer={<div className="text-sm text-gray-500">v1.0.0</div>}
/>Sidebar Navigation
Dashboard Overview
Welcome back! Here's what's happening with your projects.
Total Projects
24
Active Tasks
18
Team Members
8
Recent Activity
Project Alpha was updated 2 hours ago
Added new features and improved performance
Task completed by Sarah Johnson
UI/UX design review finished
New team member joined the project
Mike Chen was added to the development team
Collapsible Design
Toggle between expanded and collapsed states for better space utilization.
Smooth Animations
CSS transitions provide smooth expand/collapse animations and hover effects.
User Context
Display user information and quick access to profile settings in the footer.
Pagination
import { Pagination } from "~/components/ui";
import { useState } from "react";
function MyComponent() {
const [currentPage, setCurrentPage] = useState(1);
return (
<Pagination
currentPage={currentPage}
totalPages={10}
onPageChange={setCurrentPage}
/>
);
}Bottom Navigation (Mobile)
Job Search
Find your dream job with personalized recommendations
Senior React Developer
TechCorp Inc.
Full Stack Engineer
StartupXYZ
Responsive
Auto-hides on desktop, appears on mobile
Performance
Optimized for touch interactions
Navigation Patterns
Responsive Navigation
Navigation components automatically adapt to different screen sizes. Top navigation collapses on mobile, sidebar becomes overlay, and bottom nav appears on mobile devices.
Navigation States
All navigation components support hover, active, and disabled states. Visual feedback helps users understand their current location and available actions.
All Code Examples
Top Navigation
Top Navigation
import { TopNav } from "~/components/ui";
const navItems = [
{ label: "Home", href: "/", icon: <FaHome /> },
{ label: "About", href: "/about", active: true },
{ label: "Contact", href: "/contact" }
];
<TopNav
brand={<span className="flex items-center space-x-2">
<FaRocket /> <span>Brand</span>
</span>}
items={navItems}
actions={<button className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Sign In</button>}
/>Breadcrumbs
Breadcrumbs
import { Breadcrumbs } from "~/components/ui";
<Breadcrumbs
items={[
{ label: "Home", href: "/" },
{ label: "Projects", href: "/projects" },
{ label: "Current Project" }
]}
/>Tab Navigation
Tab Navigation
import { TabNav } from "~/components/ui";
<TabNav
items={[
{ label: "Overview", href: "#overview", active: true },
{ label: "Settings", href: "#settings" },
{ label: "Team", href: "#team", icon: <FaUsers /> }
]}
/>Sidebar Navigation
Sidebar Navigation
import { SideNav } from "~/components/ui";
<SideNav
header={<div className="text-xl font-bold">Dashboard</div>}
items={[
{ label: "Dashboard", href: "#", icon: <FaHome />, active: true },
{ label: "Projects", href: "#", icon: <FaBriefcase /> }
]}
footer={<div className="text-sm text-gray-500">v1.0.0</div>}
/>Pagination
Pagination
import { Pagination } from "~/components/ui";
import { useState } from "react";
function MyComponent() {
const [currentPage, setCurrentPage] = useState(1);
return (
<Pagination
currentPage={currentPage}
totalPages={10}
onPageChange={setCurrentPage}
/>
);
}Best Practices
✅ Do's
- Use clear, descriptive labels for navigation items
- Include icons with text for better visual hierarchy
- Show active state clearly to indicate current location
- Keep navigation simple and avoid deep nesting
- Use breadcrumbs for deep page hierarchies
❌ Don'ts
- Don't use navigation for primary actions - use buttons
- Avoid generic labels like "Menu" or "Options"
- Don't hide important navigation behind multiple clicks
- Avoid using only icons without text labels
- Don't change navigation structure frequently