Navbar

A composable, themeable and customizable navbar component.

Installation

pnpm add @notion-kit/navbar

Examples


Notion Navbar

import type { Page, User } from "@notion-kit/schemas";
 
export const defaultPage: Page = {
  type: "page",
  id: "12",
  title: "Title",
  isArchived: false,
  parentId: null,
  isPublished: false,
  isFavorite: true,
  createdAt: 0,
  lastEditedAt: 0,
  createdBy: "admin",
  lastEditedBy: "admin",
};
 
export const currentUser: User = {
  id: "u1",
  name: "Steve Yu",
  email: "steve@example.com",
  avatarUrl: "",
};
 
export const otherUsers: User[] = [
  {
    id: "u2",
    name: "Pong",
    email: "pong@example.com",
    avatarUrl: "",
  },
  {
    id: "u3",
    name: "Ming",
    email: "ming@example.com",
    avatarUrl: "",
  },
];
 

API Reference

A Navbar extends the HTML <nav> element.

A NavbarItem extends the <Button> component. We list the extended properties only.

Note

  • It must be used within <TooltipProvider>.
  • It uses nav-icon variant by default. See more about Button variants.
PropTypeDescription
hint*stringThe displayed tooltip hint.

On this page