Pro Components

Base Components

Navigation 1

Responsive navbar with desktop dropdown menus, login/signup, and mobile drawer with accordion navigation.

Example

BlakeUI

Introduction

Navigation 1 is a responsive navigation bar for both desktop and mobile. It includes:
  • Desktop: Logo, navigation menu with dropdowns (Products, Docs), standalone About link, and Log in / Sign up buttons.
  • Mobile: Hamburger button that opens a left-side drawer with accordion sections (Products, Docs), About link, and auth buttons.
It uses the Navigation Menu, Drawer, and Accordion components.

Usage

import { Navbar1 } from "@/components/ui/navbar-1";

<Navbar1 />;
Replace the placeholder links and copy (Brand, Products, Docs, About, Log in, Sign up) with your own routes and labels. The component is self-contained; customize by editing the component file or by forking it and passing props if you extend it.

On this page

ExampleIntroductionInstallationUsage