Shadcn UI Application Shell Block
ApplicationShell4 is a top-navigation layout similar to ApplicationShell3 but with tab-style navigation links instead of dropdown menus. The sticky header contains a logo, horizontal navigation tabs with active state indicators, a search input, and a user profile dropdown. Mobile navigation uses a sheet menu.
Light background with a bordered header. Navigation tabs use ghost button styling with the active tab highlighted. The search input includes a search icon prefix. The user dropdown shows avatar, name, and email. On mobile, a hamburger menu reveals the full navigation in a slide-in sheet.
This variation offers simpler navigation without nested dropdowns, making it suitable for apps with flat navigation structures. The tab-style links provide clear visual feedback for the current section. A clean, minimal approach to top navigation.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
| react | NPM |
avatar @shadcn | Registry |
button @shadcn | Registry |
dropdown-menu @shadcn | Registry |
input @shadcn | Registry |
sheet @shadcn | Registry |