Navigation Components

/**
 * Vertical navigation component with hierarchical structure
 * @param props - Nav properties
 * @returns JSX element for navigation
 */
function Nav(props: INavProps): JSX.Element;

interface INavProps {
  /** Navigation link groups */
  groups?: INavLinkGroup[];
  /** Currently selected key */
  selectedKey?: string;
  /** Link click handler */
  onLinkClick?: (event?: React.MouseEvent<HTMLElement>, item?: INavLink) => void;
  /** Custom link renderer */
  onRenderLink?: (link?: INavLink) => JSX.Element | null;
  /** Whether nav is on top of page */
  isOnTop?: boolean;
  /** Initial selected key */
  initialSelectedKey?: string;
  /** ARIA label */
  ariaLabel?: string;
  /** Custom styles */
  styles?: INavStyles;
}

interface INavLinkGroup {
  /** Group name */
  name?: string;
  /** Group links */
  links: INavLink[];
  /** Whether group is collapsed */
  collapseByDefault?: boolean;
}

interface INavLink {
  /** Display name */
  name: string;
  /** Navigation URL */
  url?: string;
  /** Unique key */
  key?: string;
  /** Child links */
  links?: INavLink[];
  /** Whether link is expanded */
  isExpanded?: boolean;
  /** Whether link is disabled */
  disabled?: boolean;
  /** Icon properties */
  iconProps?: IIconProps;
  /** Target for link */
  target?: string;
  /** Click handler */
  onClick?: (event?: React.MouseEvent<HTMLElement>, item?: INavLink) => void;
  /** Additional data */
  data?: any;
}

import { Nav, INavLinkGroup } from "@fluentui/react";

const navigationGroups: INavLinkGroup[] = [
  {
    name: 'Pages',
    links: [
      {
        name: 'Home',
        key: 'home',
        url: '/',
        iconProps: { iconName: 'Home' },
      },
      {
        name: 'Dashboard',
        key: 'dashboard',
        url: '/dashboard',
        iconProps: { iconName: 'ViewDashboard' },
      },
      {
        name: 'Reports',
        key: 'reports',
        iconProps: { iconName: 'BarChartVertical' },
        links: [
          { name: 'Sales Report', key: 'sales', url: '/reports/sales' },
          { name: 'Usage Report', key: 'usage', url: '/reports/usage' },
          { name: 'Performance', key: 'performance', url: '/reports/performance' },
        ],
      },
    ],
  },
  {
    name: 'Settings',
    links: [
      {
        name: 'User Settings',
        key: 'user-settings',
        url: '/settings/user',
        iconProps: { iconName: 'Settings' },
      },
      {
        name: 'Admin',
        key: 'admin',
        url: '/admin',
        iconProps: { iconName: 'AdminDLogoInverse32' },
      },
    ],
  },
];

<Nav
  groups={navigationGroups}
  selectedKey="dashboard"
  onLinkClick={(event, item) => {
    console.log('Nav link clicked:', item?.name);
    if (item?.url) {
      window.location.href = item.url;
    }
  }}
  ariaLabel="Main navigation"
/>

/**
 * Horizontal command/action bar component
 * @param props - Command bar properties
 * @returns JSX element for command bar
 */
function CommandBar(props: ICommandBarProps): JSX.Element;

interface ICommandBarProps {
  /** Primary command items */
  items: ICommandBarItemProps[];
  /** Overflow command items */
  overflowItems?: ICommandBarItemProps[];
  /** Far (right-aligned) items */
  farItems?: ICommandBarItemProps[];
  /** ARIA label */
  ariaLabel?: string;
  /** Custom styles */
  styles?: ICommandBarStyles;
  /** Shift focus on reduce */
  shiftOnReduce?: boolean;
}

interface ICommandBarItemProps {
  /** Item key */
  key: string;
  /** Display text */
  text?: string;
  /** Icon properties */
  iconProps?: IIconProps;
  /** Item type */
  itemType?: ContextualMenuItemType;
  /** Click handler */
  onClick?: (event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, item?: ICommandBarItemProps) => void;
  /** Submenu items */
  subMenuProps?: IContextualMenuProps;
  /** Whether item is disabled */
  disabled?: boolean;
  /** Split button configuration */
  split?: boolean;
  /** Button properties */
  buttonStyles?: IButtonStyles;
}

import { CommandBar, ICommandBarItemProps } from "@fluentui/react";

const commandBarItems: ICommandBarItemProps[] = [
  {
    key: 'new',
    text: 'New',
    iconProps: { iconName: 'Add' },
    onClick: () => console.log('New clicked'),
    subMenuProps: {
      items: [
        { key: 'document', text: 'Document', iconProps: { iconName: 'Document' } },
        { key: 'folder', text: 'Folder', iconProps: { iconName: 'Folder' } },
      ],
    },
  },
  {
    key: 'upload',
    text: 'Upload',
    iconProps: { iconName: 'Upload' },
    onClick: () => console.log('Upload clicked'),
  },
  {
    key: 'share',
    text: 'Share',
    iconProps: { iconName: 'Share' },
    onClick: () => console.log('Share clicked'),
  },
];

const farItems: ICommandBarItemProps[] = [
  {
    key: 'info',
    text: 'Info',
    iconProps: { iconName: 'Info' },
    onClick: () => console.log('Info clicked'),
  },
];

<CommandBar
  items={commandBarItems}
  farItems={farItems}
  ariaLabel="Command bar with actions"
/>

/**
 * Breadcrumb navigation component
 * @param props - Breadcrumb properties
 * @returns JSX element for breadcrumb
 */
function Breadcrumb(props: IBreadcrumbProps): JSX.Element;

interface IBreadcrumbProps {
  /** Breadcrumb items */
  items: IBreadcrumbItem[];
  /** Maximum displayed items */
  maxDisplayedItems?: number;
  /** Item click handler */
  onItemClick?: (event?: React.MouseEvent<HTMLElement>, item?: IBreadcrumbItem) => void;
  /** Custom item renderer */
  onRenderItem?: (item?: IBreadcrumbItem, defaultRender?: (item?: IBreadcrumbItem) => JSX.Element | null) => JSX.Element | null;
  /** Custom overflow button renderer */
  onRenderOverflowIcon?: (overflowItems?: IBreadcrumbItem[]) => JSX.Element;
  /** Divider as properties */
  dividerAs?: React.ComponentType<IDividerAsProps>;
  /** Custom styles */
  styles?: IBreadcrumbStyles;
}

interface IBreadcrumbItem {
  /** Display text */
  text: string;
  /** Navigation key */
  key: string;
  /** Click handler */
  onClick?: (event?: React.MouseEvent<HTMLElement>, item?: IBreadcrumbItem) => void;
  /** Navigation href */
  href?: string;
  /** Whether item is current page */
  isCurrentItem?: boolean;
}

import { Breadcrumb, IBreadcrumbItem } from "@fluentui/react";

const breadcrumbItems: IBreadcrumbItem[] = [
  { text: 'Home', key: 'home', href: '/' },
  { text: 'Documents', key: 'documents', href: '/documents' },
  { text: 'Shared', key: 'shared', href: '/documents/shared' },
  { text: 'Annual Report.pdf', key: 'current', isCurrentItem: true },
];

<Breadcrumb
  items={breadcrumbItems}
  maxDisplayedItems={4}
  onItemClick={(event, item) => {
    if (item?.href) {
      console.log('Navigating to:', item.href);
    }
  }}
/>

/**
 * Tab-style navigation component
 * @param props - Pivot properties
 * @returns JSX element for pivot
 */
function Pivot(props: IPivotProps): JSX.Element;

/**
 * Individual tab/pivot item
 * @param props - Pivot item properties
 * @returns JSX element for pivot item
 */
function PivotItem(props: IPivotItemProps): JSX.Element;

interface IPivotProps {
  /** Selected pivot key */
  selectedKey?: string;
  /** Default selected key */
  defaultSelectedKey?: string;
  /** Selection change handler */
  onLinkClick?: (item?: PivotItem, event?: React.MouseEvent<HTMLElement>) => void;
  /** Link format */
  linkFormat?: PivotLinkFormat;
  /** Link size */
  linkSize?: PivotLinkSize;
  /** Whether pivot fills available width */
  headersOnly?: boolean;
  /** Custom styles */
  styles?: IPivotStyles;
}

interface IPivotItemProps {
  /** Item key */
  itemKey?: string;
  /** Header text */
  headerText?: string;
  /** Count displayed on tab */
  itemCount?: number;
  /** Icon properties */
  iconProps?: IIconProps;
  /** Custom header button properties */
  headerButtonProps?: IButtonProps;
}

enum PivotLinkFormat {
  links = 0,
  tabs = 1,
}

enum PivotLinkSize {
  normal = 0,
  large = 1,
}

import { Pivot, PivotItem, PivotLinkFormat, PivotLinkSize } from "@fluentui/react";

<Pivot
  linkFormat={PivotLinkFormat.tabs}
  linkSize={PivotLinkSize.large}
  onLinkClick={(item) => console.log('Selected tab:', item?.props.itemKey)}
>
  <PivotItem
    headerText="Overview"
    itemKey="overview"
    iconProps={{ iconName: 'Home' }}
  >
    <div>Overview content goes here</div>
  </PivotItem>
  
  <PivotItem
    headerText="Details"
    itemKey="details"
    itemCount={5}
    iconProps={{ iconName: 'Info' }}
  >
    <div>Details content with 5 items</div>
  </PivotItem>
  
  <PivotItem
    headerText="Activity"
    itemKey="activity"
    iconProps={{ iconName: 'Timeline' }}
  >
    <div>Activity timeline content</div>
  </PivotItem>
</Pivot>

/**
 * Context menu/dropdown menu component
 * @param props - Contextual menu properties
 * @returns JSX element for contextual menu
 */
function ContextualMenu(props: IContextualMenuProps): JSX.Element;

/**
 * Individual menu item component
 * @param props - Contextual menu item properties
 * @returns JSX element for menu item
 */
function ContextualMenuItem(props: IContextualMenuItemProps): JSX.Element;

interface IContextualMenuProps {
  /** Target element or point */
  target?: HTMLElement | React.RefObject<HTMLElement> | Point;
  /** Menu items */
  items: IContextualMenuItem[];
  /** Whether menu is visible */
  hidden?: boolean;
  /** Dismiss handler */
  onDismiss?: (event?: any, dismissAll?: boolean) => void;
  /** Item click handler */
  onItemClick?: (event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, item?: IContextualMenuItem) => void;
  /** Directional hint for positioning */
  directionalHint?: DirectionalHint;
  /** Whether menu should focus on mount */
  shouldFocusOnMount?: boolean;
  /** Custom styles */
  styles?: IContextualMenuStyles;
}

interface IContextualMenuItem {
  /** Item key */
  key: string;
  /** Display text */
  text?: string;
  /** Item type */
  itemType?: ContextualMenuItemType;
  /** Icon properties */
  iconProps?: IIconProps;
  /** Click handler */
  onClick?: (event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, item?: IContextualMenuItem) => void;
  /** Submenu items */
  subMenuProps?: IContextualMenuProps;
  /** Whether item is disabled */
  disabled?: boolean;
  /** Whether item is checked */
  checked?: boolean;
  /** Whether item can be checked */
  canCheck?: boolean;
  /** Split button configuration */
  split?: boolean;
  /** Secondary text */
  secondaryText?: string;
  /** Additional data */
  data?: any;
}

enum ContextualMenuItemType {
  Normal = 0,
  Divider = 1,
  Header = 2,
  Section = 3,
}

import { 
  ContextualMenu, 
  IContextualMenuItem, 
  ContextualMenuItemType,
  DirectionalHint 
} from "@fluentui/react";

const menuItems: IContextualMenuItem[] = [
  {
    key: 'new',
    text: 'New',
    iconProps: { iconName: 'Add' },
    subMenuProps: {
      items: [
        { key: 'document', text: 'Document', iconProps: { iconName: 'Document' } },
        { key: 'folder', text: 'Folder', iconProps: { iconName: 'Folder' } },
        { key: 'divider1', itemType: ContextualMenuItemType.Divider },
        { key: 'template', text: 'From Template', iconProps: { iconName: 'FileTemplate' } },
      ],
    },
  },
  { key: 'divider1', itemType: ContextualMenuItemType.Divider },
  {
    key: 'share',
    text: 'Share',
    iconProps: { iconName: 'Share' },
    onClick: () => console.log('Share clicked'),
  },
  {
    key: 'copy',
    text: 'Copy Link',
    iconProps: { iconName: 'Link' },
    onClick: () => console.log('Copy link clicked'),
  },
  { key: 'divider2', itemType: ContextualMenuItemType.Divider },
  {
    key: 'delete',
    text: 'Delete',
    iconProps: { iconName: 'Delete' },
    onClick: () => console.log('Delete clicked'),
  },
];

function ContextMenuExample() {
  const [showMenu, setShowMenu] = React.useState(false);
  const targetRef = React.useRef<HTMLButtonElement>(null);

  return (
    <>
      <button
        ref={targetRef}
        onClick={() => setShowMenu(true)}
      >
        Show Menu
      </button>
      
      <ContextualMenu
        target={targetRef}
        items={menuItems}
        hidden={!showMenu}
        onDismiss={() => setShowMenu(false)}
        directionalHint={DirectionalHint.bottomLeftEdge}
      />
    </>
  );
}

/**
 * Check if URL is relative
 * @param url - URL to check
 * @returns Whether URL is relative
 */
function isRelativeUrl(url: string): boolean;

/**
 * Get command bar button styles
 * @param theme - Theme object
 * @returns Command bar button styles
 */
function getCommandButtonStyles(theme: ITheme): IButtonStyles;

/**
 * Get command bar styles
 * @param props - Command bar style properties
 * @returns Command bar styles
 */
function getCommandBarStyles(props: ICommandBarStyleProps): ICommandBarStyles;

/**
 * Get contextual menu item styles
 * @param theme - Theme object
 * @returns Contextual menu item styles
 */
function getContextualMenuItemStyles(theme: ITheme): IContextualMenuItemStyles;

/**
 * Get menu item styles
 * @param theme - Theme object
 * @returns Menu item styles
 */
function getMenuItemStyles(theme: ITheme): IMenuItemStyles;

/**
 * Get submenu items from contextual menu items
 * @param items - Menu items
 * @param target - Target element
 * @returns Submenu items
 */
function getSubmenuItems(items: IContextualMenuItem[], target?: HTMLElement): IContextualMenuItem[];

/**
 * Check if any menu items can be checked
 * @param items - Menu items to check
 * @returns Whether any items can be checked
 */
function canAnyMenuItemsCheck(items: IContextualMenuItem[]): boolean;