Navbar 17 - Signed-in app header with avatar menuPro
A logged-in application header with workspace navigation, an active-tab indicator, a notification bell with unread dot and an avatar that opens an account dropdown with profile, billing, settings and sign out. Use it at the top of dashboards and SaaS apps once a user is authenticated.
About Navbar 17
A logged-in application header with workspace navigation, an active-tab indicator, a notification bell with unread dot and an avatar that opens an account dropdown with profile, billing, settings and sign out. Use it at the top of dashboards and SaaS apps once a user is authenticated.
Navbar 17 is a pro navbar block for React, built on shadcn/ui and Tailwind CSS. It ships as 137 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- avatar
- user menu
- logged in
- dropdown
- notifications
- app
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/navbar-17Dependencies installed automatically: lucide-react.
Uses: avatar, button, dropdown-menu, sheet, utils.
Usage
import Navbar17 from "@/components/blocks/navbar-17"
export default function Page() {
return <Navbar17 />
}