43 Pro components and page blocks

Get Pro
uibrik

Mega Navbar

Pro

Preview

Customize

Centre
Two
Open delay90ms

Usage

import { MegaNavbar } from "@/components/uibrik/mega-navbar/mega-navbar";

<MegaNavbar />

Installation

Pro

Mega Navbar is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/mega-navbar

Props

MegaNavbar
align
Type "left" | "center" | "right"
"center"
Where the links sit: beside the logo, centred, or beside the CTAs.
ctas
Type "none" | "one" | "two"
"two"
How many call-to-action buttons.
brand
Type string
"Acme"
Text beside the mark.
primaryLabel
Type string
"Get started"
Label of the main button.
secondaryLabel
Type string
"Sign in"
Label of the quieter button.
openDelay
Type number
90
Hover time before the first menu opens.
logo
Type ReactNode
–
Your own logo; replaces the default mark.
current
Type string
–
Label of the current page's link.
primaryHref / secondaryHref
Type string
–
Where the CTAs go.
className
Type string
–
Classes for the header.
links
Type { label; href?; items?: { label; description?; icon?; href? }[] }[]
–
Links; give one items to make it open a menu.
maxWidth
Type number
1120
Width of the content inside the bar, in px.