# Navbar
**Category**: react
**URL**: https://www.heroui.com/docs/react/migration/navbar
**Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/migration/(components)/navbar.mdx
> Migration guide for Navbar from HeroUI v2 to v3
***
The Navbar component has been **removed** in HeroUI v3. Build navigation bars manually using native HTML elements and Tailwind CSS classes. This guide focuses on common patterns and simplifies complex features.
## Key Changes
### 1. Component Removal
**v2:** `` and subcomponents (`NavbarBrand`, `NavbarContent`, `NavbarItem`, `NavbarMenu`, `NavbarMenuItem`, `NavbarMenuToggle`)
**v3:** Manual composition using native HTML elements
### 2. Subcomponents Mapping
| v2 Component | v3 Equivalent | Notes |
|-------------|---------------|-------|
| `Navbar` | `` element | Main container |
| `NavbarBrand` | `` or `
` | Logo/brand area |
| `NavbarContent` | `` element | Navigation list |
| `NavbarItem` | `` element | Navigation item |
| `NavbarMenu` | Mobile menu overlay | Custom implementation |
| `NavbarMenuItem` | ` ` in mobile menu | Mobile menu item |
| `NavbarMenuToggle` | `` | Mobile menu toggle |
### 3. Features Removed
- `shouldHideOnScroll` - Requires custom scroll detection
- `isBlurred` - Use Tailwind `backdrop-blur` utilities
- `isBordered` - Use Tailwind border classes
- `position` variants - Use Tailwind `sticky`, `fixed` classes
- `maxWidth` variants - Use Tailwind `max-w-*` classes
- Mobile menu animations - Requires custom implementation
- Scroll blocking - Requires custom implementation (see "Scroll Blocking" below)
## Migration Examples
### Basic Navbar
```tsx
import { Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button } from "@heroui/react";
{/* Basic */}
ACME
{/* With right-aligned content */}
Logo
Sign Up
```
```tsx
import { Link, Button } from "@heroui/react";
{/* Basic */}
{/* With right-aligned content */}
```
### With Mobile Menu (Simplified)
```tsx
import {
Navbar,
NavbarBrand,
NavbarContent,
NavbarItem,
NavbarMenu,
NavbarMenuItem,
NavbarMenuToggle,
} from "@heroui/react";
function App() {
const [isMenuOpen, setIsMenuOpen] = useState(false);
return (
Logo
Features
Pricing
Features
Pricing
);
}
```
```tsx
import { useState } from "react";
import { Link, Button } from "@heroui/react";
function App() {
const [isMenuOpen, setIsMenuOpen] = useState(false);
return (
setIsMenuOpen(!isMenuOpen)}
aria-label="Toggle menu"
>
Menu
{isMenuOpen ? (
Logo
{isMenuOpen && (
)}
);
}
```
## Complete Example
```tsx
import {
Navbar,
NavbarBrand,
NavbarContent,
NavbarItem,
NavbarMenu,
NavbarMenuItem,
NavbarMenuToggle,
Link,
Button,
} from "@heroui/react";
export default function App() {
const [isMenuOpen, setIsMenuOpen] = useState(false);
return (
ACME
Sign Up
);
}
```
```tsx
import { useState } from "react";
import { Link, Button } from "@heroui/react";
export default function App() {
const [isMenuOpen, setIsMenuOpen] = useState(false);
return (
setIsMenuOpen(!isMenuOpen)}
aria-label="Toggle menu"
aria-expanded={isMenuOpen}
>
Menu
{isMenuOpen ? (
Sign Up
{isMenuOpen && (
Sign Up
)}
);
}
```
## Creating a Reusable Navbar Component (Recommended)
Since navbars are commonly needed, here's a simplified reusable component:
```tsx
import { useState, ReactNode } from "react";
import { Link, Button } from "@heroui/react";
import { cn } from "@/lib/utils"; // or your cn utility
interface NavbarItem {
label: string;
href: string;
isActive?: boolean;
}
interface NavbarProps {
brand: ReactNode;
items: NavbarItem[];
rightContent?: ReactNode;
className?: string;
maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
position?: "static" | "sticky" | "fixed";
}
const maxWidthClasses = {
sm: "max-w-[640px]",
md: "max-w-[768px]",
lg: "max-w-[1024px]",
xl: "max-w-[1280px]",
"2xl": "max-w-[1536px]",
full: "max-w-full",
};
export function Navbar({
brand,
items,
rightContent,
className,
maxWidth = "lg",
position = "sticky",
}: NavbarProps) {
const [isMenuOpen, setIsMenuOpen] = useState(false);
return (
setIsMenuOpen(!isMenuOpen)}
aria-label="Toggle menu"
aria-expanded={isMenuOpen}
>
Menu
{isMenuOpen ? (
{brand}
{items.map((item) => (
))}
{rightContent && {rightContent}
}
{isMenuOpen && (
{items.map((item) => (
))}
{rightContent && (
{rightContent}
)}
)}
);
}
// Usage
ACME
}
items={[
{ label: "Features", href: "#features" },
{ label: "Dashboard", href: "#dashboard", isActive: true },
{ label: "Pricing", href: "#pricing" },
]}
rightContent={
<>
Sign Up
}
/>
```
## Advanced Features (Custom Implementation Required)
### Hide on Scroll
The `shouldHideOnScroll` feature requires custom scroll detection:
```tsx
import { useState, useEffect } from "react";
function useScrollDirection() {
const [isHidden, setIsHidden] = useState(false);
const [lastScrollY, setLastScrollY] = useState(0);
useEffect(() => {
const handleScroll = () => {
const currentScrollY = window.scrollY;
setIsHidden(currentScrollY > lastScrollY && currentScrollY > 64);
setLastScrollY(currentScrollY);
};
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, [lastScrollY]);
return isHidden;
}
function NavbarWithHideOnScroll() {
const isHidden = useScrollDirection();
return (
{/* navbar content */}
);
}
```
### Scroll Blocking
For blocking scroll when mobile menu is open:
```tsx
useEffect(() => {
if (isMenuOpen) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
return () => {
document.body.style.overflow = "";
};
}, [isMenuOpen]);
```
## Summary
1. **Component Removed**: All Navbar components removed (`Navbar`, `NavbarBrand`, `NavbarContent`, `NavbarItem`, `NavbarMenu`, `NavbarMenuItem`, `NavbarMenuToggle`)
2. **Import Change**: Remove all Navbar imports from `@heroui/react`
3. **Manual Composition**: Build navbars using native HTML elements
4. **Mobile Menu**: Implement mobile menu manually with state management
5. **Styling**: Apply Tailwind CSS classes directly
6. **Advanced Features**: Hide on scroll, animations require custom implementation
## Migration Steps
1. **Remove Imports**: Remove all Navbar-related imports
2. **Replace Structure**: Replace `` with `` element
3. **Replace Subcomponents**: Replace subcomponents with semantic HTML (``, ``, ``)
4. **Add Mobile Menu**: Implement mobile menu toggle and menu manually
5. **Apply Styling**: Use Tailwind CSS classes for layout and styling
6. **Handle State**: Manage mobile menu state with React `useState`
7. **Optional**: Create reusable Navbar component for your application
## Common Patterns
### Simple Navigation
```tsx
```
### With Dropdown (using v3 Dropdown)
```tsx
import { Dropdown, Button, Label } from "@heroui/react";
Features
Feature 1
Feature 2
```