Navigation Components

/**
 * Horizontal navigation bar container with consistent styling
 * @param props - Navbar configuration and content
 */
function Navbar(props: NavbarProps): JSX.Element;

/**
 * Section grouping component for organizing navbar content
 * @param props - Navbar group alignment and content
 */  
function NavbarGroup(props: NavbarGroupProps): JSX.Element;

/**
 * Navbar heading component for application titles
 * @param props - Heading content and styling
 */
function NavbarHeading(props: NavbarHeadingProps): JSX.Element;

/**
 * Visual separator for navbar sections
 * @param props - Divider styling options
 */
function NavbarDivider(props: NavbarDividerProps): JSX.Element;

interface NavbarProps extends Props {
  fixedToTop?: boolean;
  children?: React.ReactNode;
}

interface NavbarGroupProps extends Props {
  align?: Alignment;
  children?: React.ReactNode;
}

interface NavbarHeadingProps extends Props {
  children?: React.ReactNode;
}

interface NavbarDividerProps extends Props {}

import { Navbar, NavbarGroup, NavbarHeading, NavbarDivider, Button, Alignment } from "@blueprintjs/core";

<Navbar>
  <NavbarGroup>
    <NavbarHeading>My App</NavbarHeading>
    <NavbarDivider />
    <Button text="Home" minimal />
    <Button text="About" minimal />
  </NavbarGroup>
  <NavbarGroup align={Alignment.RIGHT}>
    <Button text="Login" />
  </NavbarGroup>
</Navbar>

/**
 * Container for breadcrumb navigation items
 * @param props - Breadcrumbs configuration and overflow handling
 */
function Breadcrumbs(props: BreadcrumbsProps): JSX.Element;

/**
 * Individual breadcrumb item with optional link behavior
 * @param props - Breadcrumb content and interaction handlers
 */
function Breadcrumb(props: BreadcrumbProps): JSX.Element;

interface BreadcrumbsProps extends Props {
  breadcrumbRenderer?: (props: BreadcrumbProps) => React.ReactNode;
  collapseFrom?: Boundary;
  currentBreadcrumbRenderer?: (props: BreadcrumbProps) => React.ReactNode;
  items: BreadcrumbProps[];
  minVisibleItems?: number;
  overflowListProps?: Partial<OverflowListProps>;
  popoverProps?: Partial<PopoverProps>;
}

interface BreadcrumbProps extends ActionProps, LinkProps, Props {
  current?: boolean;
  disabled?: boolean;
  href?: string;
  icon?: IconName | MaybeElement;
  target?: string;
  text?: React.ReactNode;
}

enum Boundary {
  START = "start",
  END = "end"  
}

/**
 * Vertical menu container for menu items and dividers
 * @param props - Menu configuration and content
 */
function Menu(props: MenuProps): JSX.Element;

/**
 * Individual menu item with icon, text, and interaction support
 * @param props - Menu item content, styling, and event handlers
 */
function MenuItem(props: MenuItemProps): JSX.Element;

/**
 * Visual separator between menu sections
 * @param props - Menu divider styling and content
 */
function MenuDivider(props: MenuDividerProps): JSX.Element;

interface MenuProps extends Props {
  large?: boolean;
  ulRef?: React.Ref<HTMLUListElement>;
  children?: React.ReactNode;
}

interface MenuItemProps extends ActionProps, LinkProps, Props {
  active?: boolean;
  disabled?: boolean;
  href?: string;
  htmlTitle?: string;
  icon?: IconName | MaybeElement;
  intent?: Intent;
  label?: React.ReactNode;
  labelClassName?: string;
  labelElement?: React.ReactElement;
  multiline?: boolean;
  popoverProps?: Partial<PopoverProps>;
  roleStructure?: "menuitem" | "listoption" | "listitem" | "none";
  selected?: boolean;
  shouldDismissPopover?: boolean;
  submenuProps?: Partial<PopoverProps>;
  tagName?: keyof JSX.IntrinsicElements;
  target?: string;
  text?: React.ReactNode;
  textClassName?: string;
  children?: React.ReactNode;
}

interface MenuDividerProps extends Props {
  title?: React.ReactNode;
}

import { Menu, MenuItem, MenuDivider, Intent } from "@blueprintjs/core";

<Menu>
  <MenuItem icon="new-text-box" text="New File" />
  <MenuItem icon="new-object" text="New Folder" />
  <MenuDivider />
  <MenuItem icon="cog" text="Settings" />
  <MenuItem 
    icon="log-out" 
    text="Logout" 
    intent={Intent.DANGER}
    onClick={handleLogout}
  />
</Menu>

/**
 * Tabbed interface container with tab list and panel management
 * @param props - Tabs configuration, selection, and content
 */
function Tabs(props: TabsProps): JSX.Element;

/**
 * Individual tab with title, icon, and selection state
 * @param props - Tab content and styling options
 */
function Tab(props: TabProps): JSX.Element;

/**
 * Content panel associated with a specific tab
 * @param props - Tab panel content and configuration
 */
function TabPanel(props: TabPanelProps): JSX.Element;

/**
 * Flexible space expander for tab layouts
 * @param props - Expander styling options
 */
function TabsExpander(props: Props): JSX.Element;

interface TabsProps extends Props {
  animate?: boolean;
  defaultSelectedTabId?: TabId;
  fill?: boolean;
  large?: boolean;
  onChange?: (newTabId: TabId, prevTabId: TabId | undefined, event: React.MouseEvent<HTMLElement>) => void;
  renderActiveTabPanelOnly?: boolean;
  selectedTabId?: TabId;
  vertical?: boolean;
  children?: React.ReactNode;
}

interface TabProps extends Props {
  disabled?: boolean;
  icon?: IconName | MaybeElement;
  id: TabId;
  panel?: React.ReactNode;
  panelClassName?: string;
  tagName?: keyof JSX.IntrinsicElements;
  title?: React.ReactNode;
  children?: React.ReactNode;
}

interface TabPanelProps extends Props {
  children?: React.ReactNode;
}

type TabId = string | number;

// Alias for TabsExpander
const Expander = TabsExpander;

import { Tabs, Tab, TabPanel } from "@blueprintjs/core";

// Basic tabs
<Tabs id="example-tabs" onChange={handleTabChange}>
  <Tab id="home" title="Home" panel={<div>Home content</div>} />
  <Tab id="profile" title="Profile" icon="user" panel={<div>Profile content</div>} />
  <Tab id="settings" title="Settings" panel={<div>Settings content</div>} />
</Tabs>

// Controlled tabs with separate panels
<Tabs selectedTabId={activeTab} onChange={setActiveTab}>
  <Tab id="tab1" title="First Tab" />
  <Tab id="tab2" title="Second Tab" />
</Tabs>
<TabPanel>
  {activeTab === "tab1" ? <FirstTabContent /> : <SecondTabContent />}
</TabPanel>

import { Breadcrumbs, Button } from "@blueprintjs/core";

const breadcrumbItems = [
  { text: "Home", href: "/" },
  { text: "Documents", href: "/documents" },
  { text: "Projects", href: "/documents/projects" },
  { text: "Current Project", current: true }
];

<Breadcrumbs
  items={breadcrumbItems}
  minVisibleItems={2}
  overflowListProps={{
    collapseFrom: "start"
  }}
/>

import { Menu, MenuItem, MenuDivider, Popover } from "@blueprintjs/core";

// Menu with submenus
<Menu>
  <MenuItem text="File">
    <MenuItem text="New" icon="document" />
    <MenuItem text="Open" icon="folder-open" />
    <MenuDivider />
    <MenuItem text="Save" icon="floppy-disk" />
  </MenuItem>
  <MenuItem text="Edit">
    <MenuItem text="Undo" icon="undo" />
    <MenuItem text="Redo" icon="redo" />
  </MenuItem>
</Menu>

// Menu with custom rendering
<Menu>
  <MenuItem 
    text="User Profile"
    label="Ctrl+P"
    labelElement={<span className="custom-label">★</span>}
    multiline
  />
</Menu>

// Action and link prop interfaces
interface ActionProps {
  disabled?: boolean;
  icon?: IconName | MaybeElement;
  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
  text?: React.ReactNode;
}

interface LinkProps {
  href?: string;
  target?: string;
  rel?: string;
}