A composable, themeable and customizable navbar component.
A Navbar extends the HTML <nav> element.
A NavbarItem extends the <Button> component. We list the extended properties only.
Note
Notion UI<TooltipProvider>.nav-icon variant by default. See more about Button variants.| Prop | Type | Description |
|---|---|---|
hint* | string | The displayed tooltip hint. |
pnpm add @notion-kit/navbarimport 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: "",
},
];