Pro Components

Base Components

Navigation 3

Navbar with expandable mega menu (multi-column), desktop and mobile layouts, and contact/footer section in the dropdown.

Example

Introduction

Navigation 3 is a navbar with a mega menu and mobile support:
  • Desktop: Logo, “Products” trigger that opens a wide dropdown with multiple columns (e.g. Platform, Resources, Company), direct links (Solutions, Pricing), and Sign in. The dropdown includes a footer strip with contact information (e.g. support email).
  • Mobile: Hamburger opens a left-side drawer with simple links (Products, Solutions, Pricing), contact block, and Sign in button.
It uses the Dropdown Menu for the mega menu and Drawer for the mobile menu.

Usage

import { Navbar29 } from "@/components/ui/navbar-29";

<Navbar29 />
Replace the company name, column headings (Platform, Resources, Company), links, support email, and Sign in with your own content. The mega menu width and columns can be adjusted via the dropdown content classes.

On this page

ExampleIntroductionInstallationUsage