CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-nextui-org--react

Beautiful and modern React UI library with comprehensive components, theming, and accessibility support.

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

navigation.mddocs/

Navigation Components

NextUI's navigation components provide comprehensive solutions for website navigation, hierarchical content organization, and user interface routing patterns.

Capabilities

Navbar

A responsive navigation bar component that adapts to different screen sizes with support for branding, navigation items, and mobile menu functionality.

interface NavbarProps {
  /** Navbar content including brand, items, and menu */
  children?: React.ReactNode;
  /** Fixed height of the navbar */
  height?: string | number;
  /** Maximum width constraint */
  maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
  /** Positioning behavior */
  position?: "static" | "sticky";
  /** Add bottom border */
  isBordered?: boolean;
  /** Apply blur backdrop effect */
  isBlurred?: boolean;
  /** Hide navbar when scrolling down */
  shouldHideOnScroll?: boolean;
  /** Custom CSS class */
  className?: string;
  /** Slot-based styling */
  classNames?: SlotsToClasses<NavbarSlots>;
  /** Parent scroll reference for hide behavior */
  parentRef?: React.RefObject<HTMLElement>;
  /** Scroll event handler */
  onScrollPositionChange?: (scrollPosition: number) => void;
}

type NavbarSlots = 
  | "base" | "wrapper" | "brand" | "content" 
  | "item" | "toggle" | "toggleIcon" | "menu" | "menuItem";

function Navbar(props: NavbarProps): JSX.Element;

/**
 * Hook for Navbar state management
 */
function useNavbar(props: NavbarProps): {
  Component: React.ElementType;
  slots: Record<NavbarSlots, string>;
  classNames: SlotsToClasses<NavbarSlots>;
  hideOnScroll: boolean;
  shouldHide: boolean;
  height: string | number;
  getNavbarProps: () => any;
};

Navbar Sections

Specialized components for organizing navbar content.

interface NavbarBrandProps {
  /** Brand content (logo, title, etc.) */
  children?: React.ReactNode;
  /** Custom CSS class */
  className?: string;
}

interface NavbarContentProps {
  /** Navigation content */
  children?: React.ReactNode;
  /** Content justification */
  justify?: "start" | "center" | "end";
  /** Custom CSS class */
  className?: string;
}

interface NavbarItemProps {
  /** Item content */
  children?: React.ReactNode;
  /** Whether item is currently active */
  isActive?: boolean;
  /** Custom CSS class */
  className?: string;
}

interface NavbarMenuToggleProps {
  /** Toggle icon element */
  icon?: React.ReactNode;
  /** Whether menu is open */
  isSelected?: boolean;
  /** Custom CSS class */
  className?: string;
  /** Change handler for toggle state */
  onChange?: (isSelected: boolean) => void;
}

interface NavbarMenuProps {
  /** Menu items */
  children?: React.ReactNode;
  /** Custom CSS class */
  className?: string;
  /** Portal container for menu */
  portalContainer?: Element;
}

interface NavbarMenuItemProps {
  /** Menu item content */
  children?: React.ReactNode;
  /** Custom CSS class */
  className?: string;
}

function NavbarBrand(props: NavbarBrandProps): JSX.Element;
function NavbarContent(props: NavbarContentProps): JSX.Element;
function NavbarItem(props: NavbarItemProps): JSX.Element;
function NavbarMenuToggle(props: NavbarMenuToggleProps): JSX.Element;
function NavbarMenu(props: NavbarMenuProps): JSX.Element;
function NavbarMenuItem(props: NavbarMenuItemProps): JSX.Element;

Navbar Usage Example:

import { 
  Navbar, NavbarBrand, NavbarContent, NavbarItem, NavbarMenuToggle,
  NavbarMenu, NavbarMenuItem, Button, Link
} from "@nextui-org/react";
import { useState } from "react";

function AppNavbar() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const menuItems = [
    "Profile", "Dashboard", "Activity", "Analytics", "System", "Deployments"
  ];

  return (
    <Navbar 
      onMenuOpenChange={setIsMenuOpen}
      isBlurred
      isBordered
      maxWidth="xl"
    >
      <NavbarContent>
        <NavbarMenuToggle
          aria-label={isMenuOpen ? "Close menu" : "Open menu"}
          className="sm:hidden"
        />
        <NavbarBrand>
          <p className="font-bold text-inherit">ACME</p>
        </NavbarBrand>
      </NavbarContent>

      <NavbarContent className="hidden sm:flex gap-4" justify="center">
        <NavbarItem>
          <Link color="foreground" href="#">Features</Link>
        </NavbarItem>
        <NavbarItem isActive>
          <Link href="#" aria-current="page">Customers</Link>
        </NavbarItem>
        <NavbarItem>
          <Link color="foreground" href="#">Integrations</Link>
        </NavbarItem>
      </NavbarContent>
      
      <NavbarContent justify="end">
        <NavbarItem className="hidden lg:flex">
          <Link href="#">Login</Link>
        </NavbarItem>
        <NavbarItem>
          <Button as={Link} color="primary" href="#" variant="flat">
            Sign Up
          </Button>
        </NavbarItem>
      </NavbarContent>
      
      <NavbarMenu>
        {menuItems.map((item, index) => (
          <NavbarMenuItem key={`${item}-${index}`}>
            <Link
              color={
                index === 2 ? "primary" : index === menuItems.length - 1 ? "danger" : "foreground"
              }
              className="w-full"
              href="#"
              size="lg"
            >
              {item}
            </Link>
          </NavbarMenuItem>
        ))}
      </NavbarMenu>
    </Navbar>
  );
}

Navbar Context

Context system for sharing navbar state across navbar components.

interface NavbarProviderProps {
  children: React.ReactNode;
  value: NavbarContextValue;
}

interface NavbarContextValue {
  slots: Record<NavbarSlots, string>;
  classNames?: SlotsToClasses<NavbarSlots>;
  height?: string | number;
  isMenuOpen?: boolean;
  shouldHideOnScroll?: boolean;
  hideOnScroll?: boolean;
  maxWidth?: string;
}

const NavbarProvider: React.FC<NavbarProviderProps>;

/**
 * Hook to access navbar context
 * @throws Error if used outside NavbarProvider
 */
function useNavbarContext(): NavbarContextValue;

Breadcrumbs

A navigation component that shows the user's current location within a hierarchical structure.

interface BreadcrumbsProps {
  /** Breadcrumb items */
  children: React.ReactNode;
  /** Custom separator between items */
  separator?: React.ReactNode;
  /** Size variant */
  size?: "sm" | "md" | "lg";
  /** Border radius */
  radius?: "none" | "sm" | "md" | "lg" | "full";
  /** Visual variant */
  variant?: "solid" | "bordered" | "light";
  /** Color theme */
  color?: "foreground" | "primary" | "secondary" | "success" | "warning" | "danger";
  /** Text underline behavior */
  underline?: "none" | "hover" | "always" | "active" | "focus";
  /** Hide the separator */
  hideSeparator?: boolean;
  /** Disable all breadcrumbs */
  isDisabled?: boolean;
  /** Disable animations */
  disableAnimation?: boolean;
  /** Maximum items to show before truncation */
  maxItems?: number;
  /** Items to show at start when truncated */
  itemsBeforeCollapse?: number;
  /** Items to show at end when truncated */
  itemsAfterCollapse?: number;
  /** Render function for overflow menu */
  renderEllipsis?: (items: React.ReactNode[]) => React.ReactNode;
  /** Custom CSS class */
  className?: string;
  /** Slot-based styling */
  classNames?: SlotsToClasses<BreadcrumbsSlots>;
}

type BreadcrumbsSlots = "base" | "list" | "ellipsis" | "separator";

function Breadcrumbs(props: BreadcrumbsProps): JSX.Element;

/**
 * Hook for Breadcrumbs state management
 */
function useBreadcrumbs(props: BreadcrumbsProps): {
  Component: React.ElementType;
  slots: Record<BreadcrumbsSlots, string>;
  classNames: SlotsToClasses<BreadcrumbsSlots>;
  getBreadcrumbsProps: () => any;
};

Breadcrumb Item

Individual breadcrumb items with support for links and current page indication.

interface BreadcrumbItemProps {
  /** Item content */
  children?: React.ReactNode;
  /** Whether this is the current page */
  isCurrent?: boolean;
  /** Whether item is disabled */
  isDisabled?: boolean;
  /** Link href for navigation */
  href?: string;
  /** Custom CSS class */
  className?: string;
  /** Click event handler */
  onPress?: () => void;
}

function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element;

/**
 * Hook for BreadcrumbItem state management
 */
function useBreadcrumbItem(props: BreadcrumbItemProps): {
  Component: React.ElementType;
  getBreadcrumbItemProps: () => any;
  isCurrent: boolean;
  isDisabled: boolean;
};

Breadcrumbs Usage Example:

import { Breadcrumbs, BreadcrumbItem } from "@nextui-org/react";

function NavigationBreadcrumbs() {
  return (
    <Breadcrumbs 
      size="lg" 
      color="primary"
      underline="hover"
      maxItems={4}
      itemsBeforeCollapse={1}
      itemsAfterCollapse={2}
    >
      <BreadcrumbItem href="/">Home</BreadcrumbItem>
      <BreadcrumbItem href="/products">Products</BreadcrumbItem>
      <BreadcrumbItem href="/products/electronics">Electronics</BreadcrumbItem>
      <BreadcrumbItem href="/products/electronics/phones">Phones</BreadcrumbItem>
      <BreadcrumbItem isCurrent>iPhone 15 Pro</BreadcrumbItem>
    </Breadcrumbs>
  );
}

Tabs

A tab component for organizing content into separate views with keyboard navigation and accessibility support.

interface TabsProps {
  /** Tab items */
  children?: React.ReactNode;
  /** Tab variant style */
  variant?: "solid" | "underlined" | "bordered" | "light";
  /** Color theme */
  color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
  /** Size variant */
  size?: "sm" | "md" | "lg";
  /** Border radius */
  radius?: "none" | "sm" | "md" | "lg" | "full";
  /** Cursor style for tab selection */
  cursor?: "default" | "pointer";
  /** Tab selection behavior */
  selectionMode?: "single" | "multiple";
  /** Currently selected keys */
  selectedKey?: React.Key;
  /** Default selected key for uncontrolled mode */
  defaultSelectedKey?: React.Key;
  /** All selected keys for multiple selection */
  selectedKeys?: Selection;
  /** Default selected keys for multiple selection */
  defaultSelectedKeys?: Selection;
  /** Disable empty selection */
  disallowEmptySelection?: boolean;
  /** Whether tabs should take full width */
  fullWidth?: boolean;
  /** Placement of tabs relative to content */
  placement?: "top" | "bottom" | "start" | "end";
  /** Whether tabs are keyboard focusable */
  isKeyboardActivationDisabled?: boolean;
  /** Disable all tabs */
  isDisabled?: boolean;
  /** Disable animations */
  disableAnimation?: boolean;
  /** Disable cursor animation */
  disableCursorAnimation?: boolean;
  /** Custom CSS class */
  className?: string;
  /** Slot-based styling */
  classNames?: SlotsToClasses<TabsSlots>;
  /** Selection change handler */
  onSelectionChange?: (key: React.Key) => void;
}

type TabsSlots = 
  | "base" | "tabList" | "tab" | "tabContent" 
  | "cursor" | "panel" | "wrapper";

function Tabs(props: TabsProps): JSX.Element;

/**
 * Hook for Tabs state management
 */
function useTabs(props: TabsProps): {
  Component: React.ElementType;
  slots: Record<TabsSlots, string>;
  classNames: SlotsToClasses<TabsSlots>;
  getTabsProps: () => any;
  getTabListProps: () => any;
};

Tab Item

Individual tab item component for use within Tabs.

interface TabItemProps {
  /** Tab key identifier */
  key?: React.Key;
  /** Tab title */
  title?: React.ReactNode;
  /** Tab content */
  children?: React.ReactNode;
  /** Whether tab is disabled */
  isDisabled?: boolean;
  /** Custom title content with full control */
  titleValue?: React.ReactNode;
  /** Custom CSS class */
  className?: string;
}

function Tab(props: TabItemProps): JSX.Element;

Tabs Usage Example:

import { Tabs, Tab, Card, CardBody } from "@nextui-org/react";

function ProductTabs() {
  return (
    <div className="flex w-full flex-col">
      <Tabs 
        aria-label="Product options" 
        color="primary" 
        variant="underlined"
        classNames={{
          tabList: "gap-6 w-full relative rounded-none p-0 border-b border-divider",
          cursor: "w-full bg-[#22d3ee]",
          tab: "max-w-fit px-0 h-12",
          tabContent: "group-data-[selected=true]:text-[#06b6d4]"
        }}
      >
        <Tab
          key="photos"
          title={
            <div className="flex items-center space-x-2">
              <GalleryIcon/>
              <span>Photos</span>
            </div>
          }
        >
          <Card>
            <CardBody>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
              eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </CardBody>
          </Card>  
        </Tab>
        <Tab
          key="music" 
          title={
            <div className="flex items-center space-x-2">
              <MusicIcon/>
              <span>Music</span>
            </div>
          }
        >
          <Card>
            <CardBody>
              Ut enim ad minim veniam, quis nostrud exercitation ullamco 
              laboris nisi ut aliquip ex ea commodo consequat.
            </CardBody>
          </Card>  
        </Tab>
        <Tab
          key="videos"
          title={
            <div className="flex items-center space-x-2">
              <VideoIcon/>
              <span>Videos</span>  
            </div>
          }
        >
          <Card>
            <CardBody>
              Duis aute irure dolor in reprehenderit in voluptate velit esse 
              cillum dolore eu fugiat nulla pariatur.
            </CardBody>
          </Card>  
        </Tab>
      </Tabs>
    </div>  
  );
}

Link

A link component with NextUI theming and routing integration support.

interface LinkProps {
  /** Link content */
  children?: React.ReactNode;
  /** Navigation href */
  href?: string;
  /** Link target */
  target?: "_blank" | "_self" | "_parent" | "_top";
  /** Size variant */
  size?: "sm" | "md" | "lg";
  /** Color theme */
  color?: "foreground" | "primary" | "secondary" | "success" | "warning" | "danger";
  /** Text underline behavior */
  underline?: "none" | "hover" | "always" | "active" | "focus";
  /** Whether link is disabled */
  isDisabled?: boolean;
  /** Whether link opens external content */
  isExternal?: boolean;
  /** Whether to show external link icon */
  showAnchorIcon?: boolean;
  /** Custom anchor icon */
  anchorIcon?: React.ReactNode;
  /** Whether link spans full width */
  isBlock?: boolean;
  /** Disable animations */
  disableAnimation?: boolean;
  /** Custom CSS class */
  className?: string;
  /** Press event handler */
  onPress?: () => void;
}

function Link(props: LinkProps): JSX.Element;

/**
 * Hook for Link state management
 */
function useLink(props: LinkProps): {
  Component: React.ElementType;
  getLinkProps: () => any;
  isExternal: boolean;
  showAnchorIcon: boolean;
};

/**
 * Link icon component for external links
 */
interface LinkIconProps {
  className?: string;
}

function LinkIcon(props: LinkIconProps): JSX.Element;

Link Usage Examples:

import { Link } from "@nextui-org/react";

function LinkExamples() {
  return (
    <div className="space-y-4">
      {/* Basic link */}
      <Link href="/about">About Us</Link>
      
      {/* External link with icon */}
      <Link 
        href="https://nextui.org" 
        isExternal 
        showAnchorIcon
        color="primary"
      >
        NextUI Documentation
      </Link>
      
      {/* Block link */}
      <Link 
        href="/contact"
        isBlock
        color="secondary"
        size="lg"
        underline="hover"
      >
        Contact Support
      </Link>
      
      {/* Disabled link */}
      <Link href="/coming-soon" isDisabled>
        Coming Soon
      </Link>
    </div>
  );
}

Navigation Component Types

// Common navigation types
type NavigationSize = "sm" | "md" | "lg";
type NavigationColor = "foreground" | "primary" | "secondary" | "success" | "warning" | "danger";
type UnderlineType = "none" | "hover" | "always" | "active" | "focus";

// Navbar specific types
interface NavbarState {
  isMenuOpen: boolean;
  shouldHideOnScroll: boolean;
  hideOnScroll: boolean;
  height: string | number;
  maxWidth: string;
}

// Breadcrumbs types
interface BreadcrumbsState {
  maxItems?: number;
  itemsBeforeCollapse?: number;
  itemsAfterCollapse?: number;
  isCollapsed: boolean;
  visibleItems: React.ReactNode[];
  collapsedItems: React.ReactNode[];
}

// Tabs types  
interface TabsState {
  selectedKey?: React.Key;
  selectedKeys?: Selection;
  disallowEmptySelection?: boolean;
  selectionMode?: "single" | "multiple";
  orientation: "horizontal" | "vertical";
}

// Link types
interface LinkState {
  isExternal: boolean;
  showAnchorIcon: boolean;
  isDisabled: boolean;
  href?: string;
  target?: string;
}

Integration Examples

Complete Navigation Setup

import { 
  Navbar, NavbarBrand, NavbarContent, NavbarItem,
  Breadcrumbs, BreadcrumbItem, Tabs, Tab, Link
} from "@nextui-org/react";

function AppLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="min-h-screen">
      {/* Main navigation */}
      <Navbar isBordered maxWidth="2xl">
        <NavbarBrand>
          <Link href="/" className="font-bold text-inherit">
            My App
          </Link>
        </NavbarBrand>
        <NavbarContent className="hidden sm:flex gap-4" justify="center">
          <NavbarItem>
            <Link href="/products" color="foreground">Products</Link>
          </NavbarItem>
          <NavbarItem>
            <Link href="/services" color="foreground">Services</Link>
          </NavbarItem>
          <NavbarItem>
            <Link href="/about" color="foreground">About</Link>
          </NavbarItem>
        </NavbarContent>
      </Navbar>
      
      {/* Breadcrumb navigation */}
      <div className="p-4 border-b">
        <Breadcrumbs>
          <BreadcrumbItem href="/">Home</BreadcrumbItem>
          <BreadcrumbItem href="/products">Products</BreadcrumbItem>
          <BreadcrumbItem isCurrent>Laptops</BreadcrumbItem>
        </Breadcrumbs>
      </div>
      
      {/* Content area with tabs */}
      <div className="p-4">
        {children}
      </div>
    </div>
  );
}

docs

core-system.md

data-display.md

date-time.md

feedback.md

forms.md

index.md

inputs.md

interactions.md

layout.md

navigation.md

overlays.md

utilities.md

tile.json