or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mddata-display.mddata-entry.mdfeedback.mdindex.mdlayout.mdnavigation.mdother-components.md
tile.json

navigation.mddocs/

Navigation Components

Navigation and wayfinding components including menus, breadcrumbs, pagination, and step indicators. These components help users navigate through applications and understand their current location within the interface hierarchy.

Capabilities

Menu Component

Hierarchical navigation menu with support for themes, icons, sub-menus, and various display modes.

interface MenuProps {
  defaultOpenKeys?: string[];
  defaultSelectedKeys?: string[];
  expandIcon?: React.ReactNode | ((props: SubMenuProps & { isOpen: boolean }) => React.ReactNode);
  forceSubMenuRender?: boolean;
  inlineCollapsed?: boolean;
  inlineIndent?: number;
  items?: ItemType[];
  mode?: "vertical" | "vertical-left" | "vertical-right" | "horizontal" | "inline";
  multiple?: boolean;
  openKeys?: string[];
  overflowedIndicator?: React.ReactNode;
  overflowedIndicatorPopupClassName?: string;
  rootClassName?: string;
  selectable?: boolean;
  selectedKeys?: string[];
  style?: React.CSSProperties;
  subMenuCloseDelay?: number;
  subMenuOpenDelay?: number;
  theme?: "light" | "dark";
  triggerSubMenuAction?: "hover" | "click";
  onClick?: (info: MenuInfo) => void;
  onDeselect?: (info: SelectInfo) => void;
  onOpenChange?: (openKeys: string[]) => void;
  onSelect?: (info: SelectInfo) => void;
  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
}

interface MenuItemProps {
  className?: string;
  danger?: boolean;
  disabled?: boolean;
  icon?: React.ReactNode;
  key?: React.Key;
  label?: React.ReactNode;
  title?: string;
}

interface SubMenuProps {
  children?: ItemType[];
  disabled?: boolean;
  icon?: React.ReactNode;
  key?: React.Key;
  label?: React.ReactNode;
  popupClassName?: string;
  popupOffset?: [number, number];
  theme?: "light" | "dark";
  title?: string;
  onTitleClick?: (info: { key: React.Key; domEvent: React.MouseEvent<HTMLElement> }) => void;
}

interface MenuRef {
  focus: (options?: FocusOptions) => void;
  list: HTMLUListElement | null;
}

declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<MenuRef>> & {
  Item: React.FC<MenuItemProps>;
  SubMenu: React.FC<SubMenuProps>;
  ItemGroup: React.FC<MenuItemGroupProps>;
  Divider: React.FC;
};

Usage Examples:

import { Menu } from "antd";
import { MailOutlined, AppstoreOutlined, SettingOutlined } from "@ant-design/icons";

// Basic menu
const items = [
  {
    key: "1",
    icon: <MailOutlined />,
    label: "Mail",
  },
  {
    key: "2",
    icon: <AppstoreOutlined />,
    label: "Apps",
  },
  {
    key: "sub1",
    label: "Navigation One",
    icon: <SettingOutlined />,
    children: [
      {
        key: "3",
        label: "Option 3",
      },
      {
        key: "4",
        label: "Option 4",
      },
    ],
  },
];

<Menu
  mode="horizontal"
  defaultSelectedKeys={["2"]}
  items={items}
  onClick={(e) => console.log("clicked", e)}
/>

// Vertical menu with inline sub-menu
<Menu
  mode="inline"
  defaultSelectedKeys={["1"]}
  defaultOpenKeys={["sub1"]}
  style={{ width: 256 }}
  items={items}
/>

// Dark theme menu
<Menu
  theme="dark"
  mode="horizontal"
  defaultSelectedKeys={["2"]}
  items={items}
  style={{ lineHeight: "64px" }}
/>

Breadcrumb Component

Breadcrumb navigation showing the current page's location within a navigational hierarchy.

interface BreadcrumbProps {
  className?: string;
  itemRender?: (route: Route, params: any, routes: Route[], paths: string[]) => React.ReactNode;
  params?: any;
  routes?: Route[];
  separator?: React.ReactNode;
  style?: React.CSSProperties;
}

interface BreadcrumbItemProps {
  className?: string;
  dropdownProps?: DropdownProps;
  href?: string;
  menu?: BreadcrumbItemType;
  onClick?: React.MouseEventHandler<HTMLAnchor | HTMLSpanElement>;
  overlay?: React.ReactNode;
  separator?: React.ReactNode;
}

interface BreadcrumbSeparatorProps {
  children?: React.ReactNode;
}

interface Route {
  path: string;
  breadcrumbName: string;
  children?: Omit<Route, "children">[];
}

declare const Breadcrumb: React.FC<BreadcrumbProps> & {
  Item: React.FC<BreadcrumbItemProps>;
  Separator: React.FC<BreadcrumbSeparatorProps>;
};

Usage Examples:

import { Breadcrumb } from "antd";
import { HomeOutlined, UserOutlined } from "@ant-design/icons";

// Basic breadcrumb
<Breadcrumb>
  <Breadcrumb.Item>Home</Breadcrumb.Item>
  <Breadcrumb.Item>
    <a href="">Application Center</a>
  </Breadcrumb.Item>
  <Breadcrumb.Item>
    <a href="">Application List</a>
  </Breadcrumb.Item>
  <Breadcrumb.Item>An Application</Breadcrumb.Item>
</Breadcrumb>

// Breadcrumb with icons
<Breadcrumb>
  <Breadcrumb.Item href="">
    <HomeOutlined />
  </Breadcrumb.Item>
  <Breadcrumb.Item href="">
    <UserOutlined />
    <span>Application List</span>
  </Breadcrumb.Item>
  <Breadcrumb.Item>Application</Breadcrumb.Item>
</Breadcrumb>

// Breadcrumb with custom separator
<Breadcrumb separator=">">
  <Breadcrumb.Item>Home</Breadcrumb.Item>
  <Breadcrumb.Item href="">Application Center</Breadcrumb.Item>
  <Breadcrumb.Item href="">Application List</Breadcrumb.Item>
  <Breadcrumb.Item>An Application</Breadcrumb.Item>
</Breadcrumb>

// Breadcrumb with dropdown menu
<Breadcrumb>
  <Breadcrumb.Item>Ant Design</Breadcrumb.Item>
  <Breadcrumb.Item>
    <a href="">Component</a>
  </Breadcrumb.Item>
  <Breadcrumb.Item 
    menu={{
      items: [
        {
          key: "1",
          label: (
            <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
              General
            </a>
          ),
        },
        {
          key: "2", 
          label: "Layout",
        },
        {
          key: "3",
          label: "Navigation",
        },
      ],
    }}
  >
    General
  </Breadcrumb.Item>
</Breadcrumb>

Pagination Component

Page navigation component for splitting large data sets across multiple pages.

interface PaginationProps {
  current?: number;
  defaultCurrent?: number;
  defaultPageSize?: number;
  disabled?: boolean;
  hideOnSinglePage?: boolean;
  itemRender?: (page: number, type: "page" | "prev" | "next" | "jump-prev" | "jump-next", originalElement: React.ReactElement<HTMLElement>) => React.ReactNode;
  pageSize?: number;
  pageSizeOptions?: string[] | number[];
  responsive?: boolean;
  showLessItems?: boolean;
  showQuickJumper?: boolean | { goButton?: React.ReactNode };
  showSizeChanger?: boolean;
  showTitle?: boolean;
  showTotal?: (total: number, range: [number, number]) => React.ReactNode;
  simple?: boolean;
  size?: "default" | "small";
  total?: number;
  onChange?: (page: number, pageSize: number) => void;
  onShowSizeChange?: (current: number, size: number) => void;
}

declare const Pagination: React.FC<PaginationProps>;

Usage Examples:

import { Pagination } from "antd";

// Basic pagination
<Pagination defaultCurrent={1} total={50} />

// More pages
<Pagination defaultCurrent={6} total={500} />

// Controlled pagination
const [current, setCurrent] = useState(3);

<Pagination 
  current={current} 
  onChange={(page) => setCurrent(page)} 
  total={50} 
/>

// Mini pagination
<Pagination size="small" total={50} />

// Simple pagination
<Pagination simple defaultCurrent={2} total={50} />

// Pagination with page size changer
<Pagination
  showSizeChanger
  onShowSizeChange={(current, size) => console.log(current, size)}
  defaultCurrent={3}
  total={500}
/>

// Pagination with quick jumper
<Pagination
  showQuickJumper
  defaultCurrent={2}
  total={500}
  onChange={(page) => console.log(page)}
/>

// Pagination with total info
<Pagination
  total={85}
  showTotal={(total, range) =>
    `${range[0]}-${range[1]} of ${total} items`
  }
  defaultPageSize={20}
  defaultCurrent={1}
/>

Steps Component

Step-by-step navigation indicator showing progress through a multi-step process.

interface StepsProps {
  className?: string;
  current?: number;
  direction?: "horizontal" | "vertical";
  initial?: number;
  labelPlacement?: "horizontal" | "vertical";
  percent?: number;
  progressDot?: boolean | ((iconDot: React.ReactNode, { index, status, title, description }: { index: number; status: string; title: React.ReactNode; description: React.ReactNode }) => React.ReactNode);
  responsive?: boolean;
  size?: "default" | "small";
  status?: "wait" | "process" | "finish" | "error";
  style?: React.CSSProperties;
  type?: "default" | "navigation" | "inline";
  onChange?: (current: number) => void;
  items?: StepProps[];
}

interface StepProps {
  description?: React.ReactNode;
  disabled?: boolean;
  icon?: React.ReactNode;
  status?: "wait" | "process" | "finish" | "error";
  subTitle?: React.ReactNode;
  title?: React.ReactNode;
}

declare const Steps: React.FC<StepsProps> & {
  Step: React.FC<StepProps>;
};

Usage Examples:

import { Steps } from "antd";
import { UserOutlined, SolutionOutlined, LoadingOutlined, SmileOutlined } from "@ant-design/icons";

// Basic steps
const items = [
  {
    title: "Finished",
    description: "This is a description.",
  },
  {
    title: "In Progress",
    description: "This is a description.",
    subTitle: "Left 00:00:08",
  },
  {
    title: "Waiting",
    description: "This is a description.",
  },
];

<Steps current={1} items={items} />

// Steps with icons
const iconsItems = [
  {
    title: "Login",
    status: "finish",
    icon: <UserOutlined />,
  },
  {
    title: "Verification",
    status: "finish",
    icon: <SolutionOutlined />,
  },
  {
    title: "Pay",
    status: "process",
    icon: <LoadingOutlined />,
  },
  {
    title: "Done",
    status: "wait",
    icon: <SmileOutlined />,
  },
];

<Steps items={iconsItems} />

// Vertical steps
<Steps
  current={1}
  direction="vertical"
  items={[
    {
      title: "Finished",
      description: "This is a description.",
    },
    {
      title: "In Progress",
      description: "This is a description.",
    },
    {
      title: "Waiting",
      description: "This is a description.",
    },
  ]}
/>

// Mini steps
<Steps
  size="small"
  current={1}
  items={[
    {
      title: "Finished",
    },
    {
      title: "In Progress",
    },
    {
      title: "Waiting",
    },
  ]}
/>

// Navigation steps (clickable)
<Steps
  type="navigation"
  current={current}
  onChange={(value) => setCurrent(value)}
  items={[
    {
      title: "Step 1",
      status: "finish",
    },
    {
      title: "Step 2",
      status: "process",
    },
    {
      title: "Step 3",
      status: "wait",
    },
  ]}
/>

Dropdown Component

Dropdown menu component triggered by hover or click, often used with buttons or menu items.

interface DropdownProps {
  arrow?: boolean | { pointAtCenter: boolean };
  autoAdjustOverflow?: boolean;
  autoFocus?: boolean;
  disabled?: boolean;
  destroyPopupOnHide?: boolean;
  dropdownRender?: (originNode: React.ReactNode) => React.ReactNode;
  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
  menu?: MenuProps;
  overlayClassName?: string;
  overlayStyle?: React.CSSProperties;
  placement?: "bottom" | "bottomLeft" | "bottomRight" | "top" | "topLeft" | "topRight";
  trigger?: ("click" | "hover" | "contextMenu")[];
  open?: boolean;
  onOpenChange?: (open: boolean, info: { source: "trigger" | "menu" }) => void;
}

interface DropdownButtonProps extends ButtonProps {
  buttonsRender?: (buttons: React.ReactNode[]) => React.ReactNode[];
  loading?: boolean | { delay?: number };
  menu?: MenuProps;
  placement?: "bottom" | "bottomLeft" | "bottomRight" | "top" | "topLeft" | "topRight";
  size?: SizeType;
  trigger?: ("click" | "hover" | "contextMenu")[];
  type?: ButtonType;
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
  onOpenChange?: (open: boolean, info: { source: "trigger" | "menu" }) => void;
  icon?: React.ReactNode;
}

declare const Dropdown: React.FC<DropdownProps> & {
  Button: React.FC<DropdownButtonProps>;
};

Usage Examples:

import { Dropdown, Button, Space, message } from "antd";
import { DownOutlined, UserOutlined } from "@ant-design/icons";

const handleMenuClick = (e: MenuInfo) => {
  message.info("Click on menu item.");
  console.log("click", e);
};

const items = [
  {
    label: "1st menu item",
    key: "1",
    icon: <UserOutlined />,
  },
  {
    label: "2nd menu item",
    key: "2",
    icon: <UserOutlined />,
  },
  {
    label: "3rd menu item",
    key: "3",
    icon: <UserOutlined />,
    danger: true,
  },
  {
    label: "4th menu item",
    key: "4",
    icon: <UserOutlined />,
    disabled: true,
  },
];

const menuProps = {
  items,
  onClick: handleMenuClick,
};

// Basic dropdown
<Dropdown menu={menuProps}>
  <Button>
    <Space>
      Button
      <DownOutlined />
    </Space>
  </Button>
</Dropdown>

// Dropdown button
<Dropdown.Button menu={menuProps} onClick={(e) => console.log("click left button", e)}>
  Dropdown
</Dropdown.Button>

// Dropdown with placement
<Dropdown menu={menuProps} placement="bottomLeft" arrow>
  <Button>bottomLeft</Button>
</Dropdown>

// Dropdown with custom trigger
<Dropdown menu={menuProps} trigger={["contextMenu"]}>
  <div
    style={{
      color: "#999",
      background: "#f7f7f7",
      height: 200,
      textAlign: "center",
      lineHeight: "200px",
    }}
  >
    Right Click on here
  </div>
</Dropdown>

Anchor Component

Anchor component for creating navigational anchors that can scroll to page sections.

interface AnchorProps {
  affix?: boolean;
  bounds?: number;
  getContainer?: () => HTMLElement;
  getCurrentAnchor?: (activeLink: string) => string;
  offsetTop?: number;
  showInkInFixed?: boolean;
  targetOffset?: number;
  onChange?: (currentActiveLink: string) => void;
  onClick?: (e: React.MouseEvent<HTMLElement>, link: { title: React.ReactNode; href: string }) => void;
  items?: AnchorLinkProps[];
}

interface AnchorLinkProps {
  href: string;
  target?: string;
  title: React.ReactNode;
  children?: AnchorLinkProps[];
}

declare const Anchor: React.FC<AnchorProps> & {
  Link: React.FC<AnchorLinkProps>;
};

Usage Examples:

import { Anchor } from "antd";

// Basic anchor
<Anchor
  items={[
    {
      key: "part-1",
      href: "#part-1",
      title: "Part 1",
    },
    {
      key: "part-2",
      href: "#part-2",
      title: "Part 2",
    },
    {
      key: "part-3",
      href: "#part-3",
      title: "Part 3",
    },
  ]}
/>

// Nested anchor links
<Anchor
  items={[
    {
      key: "part-1",
      href: "#part-1",
      title: "Part 1",
      children: [
        {
          key: "part-1-1",
          href: "#part-1-1",
          title: "Part 1-1",
        },
        {
          key: "part-1-2",
          href: "#part-1-2",
          title: "Part 1-2",
        },
      ],
    },
    {
      key: "part-2",
      href: "#part-2",
      title: "Part 2",
    },
  ]}
/>

// Anchor with custom container
<Anchor
  getContainer={() => document.getElementById("container")}
  items={[
    {
      key: "part-1",
      href: "#part-1",
      title: "Part 1",
    },
    {
      key: "part-2",
      href: "#part-2",
      title: "Part 2",
    },
  ]}
/>

Affix Component

Component that sticks to the viewport when scrolling, commonly used for navigation bars or action buttons.

interface AffixProps {
  offsetBottom?: number;
  offsetTop?: number;
  style?: React.CSSProperties;
  target?: () => HTMLElement | Window | null;
  onChange?: (affixed?: boolean) => void;
}

interface AffixRef {
  updatePosition: () => void;
}

declare const Affix: React.ForwardRefExoticComponent<AffixProps & React.RefAttributes<AffixRef>>;

Usage Examples:

import { Affix, Button } from "antd";

// Basic affix
<Affix>
  <Button type="primary">Affix top</Button>
</Affix>

// Affix with custom offset
<Affix offsetTop={10}>
  <Button type="primary">Affix offsetTop</Button>
</Affix>

// Affix to bottom
<Affix offsetBottom={10}>
  <Button type="primary">Affix offsetBottom</Button>
</Affix>

// Affix with callback
<Affix offsetTop={120} onChange={(affixed) => console.log(affixed)}>
  <Button>120px to affix top</Button>
</Affix>

// Affix with custom target
<Affix target={() => document.getElementById("container")}>
  <Button type="primary">Affix container</Button>
</Affix>