or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

data-display-components.mddisclosure-components.mdfeedback-components.mdform-components.mdhooks.mdindex.mdlayout-components.mdnavigation-components.mdoverlay-components.mdspecialized-components.mdstyling-system.mdtheme-system.mdtypes.mdtypography-components.md
tile.json

navigation-components.mddocs/

Navigation Components

Navigation components provide UI elements for moving between pages and sections including buttons, links, breadcrumbs, pagination, and step indicators.

Capabilities

Button Component

Button component with variants and sizes.

import { Button, IconButton, ButtonGroup, CloseButton, ButtonPropsProvider } from "@chakra-ui/react";

interface ButtonProps extends HTMLChakraProps<"button"> {
  variant?: "solid" | "subtle" | "outline" | "ghost" | "plain";
  size?: "xs" | "sm" | "md" | "lg" | "xl";
  colorPalette?: string;
  loading?: boolean;
  loadingText?: string;
  spinner?: React.ReactNode;
  spinnerPlacement?: "start" | "end";
  disabled?: boolean;
}

const Button: ChakraComponent<"button", ButtonProps>;
const ButtonPropsProvider: React.FC<{ value: ButtonProps; children: React.ReactNode }>;

interface IconButtonProps extends ButtonProps {
  "aria-label": string;
}

const IconButton: ChakraComponent<"button", IconButtonProps>;

interface ButtonGroupProps extends HTMLChakraProps<"div"> {
  attached?: boolean;
  orientation?: "horizontal" | "vertical";
}

const ButtonGroup: ChakraComponent<"div", ButtonGroupProps>;

interface CloseButtonProps extends ButtonProps {}

const CloseButton: ChakraComponent<"button", CloseButtonProps>;

Usage:

<Button variant="solid" colorPalette="blue" size="md">
  Click me
</Button>

<IconButton aria-label="Search" icon={<SearchIcon />} />

<ButtonGroup attached>
  <Button>First</Button>
  <Button>Second</Button>
  <Button>Third</Button>
</ButtonGroup>

Link Component

Link component with external link support and composable overlays.

import { Link, LinkBox, LinkOverlay, LinkPropsProvider } from "@chakra-ui/react";

interface LinkProps extends HTMLChakraProps<"a"> {
  variant?: "underline" | "plain";
}

const Link: ChakraComponent<"a", LinkProps>;
const LinkPropsProvider: React.FC<{ value: LinkProps; children: React.ReactNode }>;

interface LinkBoxProps extends HTMLChakraProps<"div"> {}

const LinkBox: ChakraComponent<"div", LinkBoxProps>;

interface LinkOverlayProps extends HTMLChakraProps<"a"> {
  external?: boolean;
}

const LinkOverlay: ChakraComponent<"a", LinkOverlayProps>;

Usage:

<Link href="/about" variant="underline">
  About Page
</Link>

<LinkBox>
  <Heading size="md">
    <LinkOverlay href="/article">Article Title</LinkOverlay>
  </Heading>
  <Text>Article description...</Text>
</LinkBox>

Breadcrumb Component

Breadcrumb navigation component.

import { Breadcrumb } from "@chakra-ui/react";

namespace Breadcrumb {
  export const Root: ChakraComponent<"nav", {
    separator?: React.ReactNode;
  }>;
  export const List: ChakraComponent<"ol">;
  export const Item: ChakraComponent<"li">;
  export const Link: ChakraComponent<"a", {
    currentPage?: boolean;
  }>;
  export const CurrentLink: ChakraComponent<"span">;
  export const Separator: ChakraComponent<"span">;
  export const Ellipsis: ChakraComponent<"span">;
}

Usage:

<Breadcrumb.Root>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
      <Breadcrumb.Separator>/</Breadcrumb.Separator>
    </Breadcrumb.Item>
    <Breadcrumb.Item>
      <Breadcrumb.Link href="/docs">Docs</Breadcrumb.Link>
      <Breadcrumb.Separator>/</Breadcrumb.Separator>
    </Breadcrumb.Item>
    <Breadcrumb.Item>
      <Breadcrumb.CurrentLink>Current Page</Breadcrumb.CurrentLink>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb.Root>

Pagination Component

Pagination component for navigating through pages.

import { Pagination, usePagination, usePaginationContext } from "@chakra-ui/react";

interface PaginationRootProps {
  page?: number;
  defaultPage?: number;
  count: number;
  pageSize?: number;
  siblingCount?: number;
  type?: "button" | "link";
  onPageChange?: (details: { page: number }) => void;
  children?: React.ReactNode;
}

namespace Pagination {
  export const Root: React.FC<PaginationRootProps>;
  export const RootProvider: React.FC<PaginationRootProps>;
  export const PrevTrigger: ChakraComponent<"button", {
    variant?: "solid" | "subtle" | "outline" | "ghost" | "plain";
  }>;
  export const NextTrigger: ChakraComponent<"button", {
    variant?: "solid" | "subtle" | "outline" | "ghost" | "plain";
  }>;
  export const Items: React.FC<{
    render?: (page: PaginationPage) => React.ReactNode;
    children?: React.ReactNode;
  }>;
  export const Item: ChakraComponent<"button", {
    type: "page" | "ellipsis";
    value: number;
    variant?: "solid" | "subtle" | "outline" | "ghost" | "plain";
  }>;
  export const Ellipsis: ChakraComponent<"div">;
  export const PageText: ChakraComponent<"span">;
}

interface UsePaginationProps {
  page?: number;
  defaultPage?: number;
  count: number;
  pageSize?: number;
  siblingCount?: number;
  onPageChange?: (details: { page: number }) => void;
}

interface UsePaginationReturn {
  page: number;
  pages: PaginationPage[];
  pageSize: number;
  totalPages: number;
  previousPage: () => void;
  nextPage: () => void;
  setPage: (page: number) => void;
}

interface PaginationPage {
  type: "page" | "ellipsis";
  value: number;
}

function usePagination(props: UsePaginationProps): UsePaginationReturn;
function usePaginationContext(): PaginationContext;

Usage:

<Pagination.Root count={100} pageSize={10}>
  <Pagination.PrevTrigger>Previous</Pagination.PrevTrigger>
  <Pagination.Items />
  <Pagination.NextTrigger>Next</Pagination.NextTrigger>
</Pagination.Root>

Steps Component

Step-by-step navigation indicator.

import { Steps, useSteps, useStepsContext, useStepsItemContext } from "@chakra-ui/react";

interface StepsRootProps {
  step?: number;
  defaultStep?: number;
  count: number;
  orientation?: "horizontal" | "vertical";
  linear?: boolean;
  onStepChange?: (details: { step: number }) => void;
  onStepComplete?: (details: { step: number }) => void;
  children?: React.ReactNode;
}

namespace Steps {
  export const Root: React.FC<StepsRootProps>;
  export const RootProvider: React.FC<StepsRootProps>;
  export const List: ChakraComponent<"div", {
    variant?: "solid" | "subtle";
    size?: "sm" | "md" | "lg";
  }>;
  export const Item: React.FC<{
    index: number;
    children?: React.ReactNode;
  }>;
  export const Trigger: ChakraComponent<"button">;
  export const Indicator: ChakraComponent<"div">;
  export const Number: ChakraComponent<"div">;
  export const Title: ChakraComponent<"div">;
  export const Description: ChakraComponent<"div">;
  export const Separator: ChakraComponent<"div">;
  export const Content: ChakraComponent<"div", {
    index: number;
  }>;
  export const CompletedContent: ChakraComponent<"div">;
  export const NextTrigger: ChakraComponent<"button">;
  export const PrevTrigger: ChakraComponent<"button">;
  export const Status: ChakraComponent<"div">;
}

interface UseStepsProps {
  step?: number;
  defaultStep?: number;
  count: number;
  linear?: boolean;
  onStepChange?: (details: { step: number }) => void;
}

interface UseStepsReturn {
  step: number;
  count: number;
  nextStep: () => void;
  prevStep: () => void;
  setStep: (step: number) => void;
  getItemProps: (props: { index: number }) => any;
}

function useSteps(props: UseStepsProps): UseStepsReturn;
function useStepsContext(): StepsContext;
function useStepsItemContext(): StepsItemContext;

Usage:

<Steps.Root count={3} defaultStep={0}>
  <Steps.List>
    <Steps.Item index={0}>
      <Steps.Trigger>
        <Steps.Indicator>
          <Steps.Number />
        </Steps.Indicator>
        <Steps.Title>Step 1</Steps.Title>
      </Steps.Trigger>
      <Steps.Separator />
    </Steps.Item>
    <Steps.Item index={1}>
      <Steps.Trigger>
        <Steps.Indicator>
          <Steps.Number />
        </Steps.Indicator>
        <Steps.Title>Step 2</Steps.Title>
      </Steps.Trigger>
      <Steps.Separator />
    </Steps.Item>
    <Steps.Item index={2}>
      <Steps.Trigger>
        <Steps.Indicator>
          <Steps.Number />
        </Steps.Indicator>
        <Steps.Title>Step 3</Steps.Title>
      </Steps.Trigger>
    </Steps.Item>
  </Steps.List>
  <Steps.Content index={0}>Content for step 1</Steps.Content>
  <Steps.Content index={1}>Content for step 2</Steps.Content>
  <Steps.Content index={2}>Content for step 3</Steps.Content>
</Steps.Root>

SkipNav Component

Skip navigation link for accessibility.

import { SkipNavLink, SkipNavContent } from "@chakra-ui/react";

interface SkipNavLinkProps extends HTMLChakraProps<"a"> {
  children?: React.ReactNode;
}

const SkipNavLink: ChakraComponent<"a", SkipNavLinkProps>;

interface SkipNavContentProps extends HTMLChakraProps<"div"> {
  id?: string;
}

const SkipNavContent: ChakraComponent<"div", SkipNavContentProps>;

Usage:

// At the top of your page
<SkipNavLink>Skip to content</SkipNavLink>

// Before your main content
<SkipNavContent id="main-content" />
<main>Your page content</main>

Types

interface PaginationContext extends UsePaginationReturn {}

interface StepsContext extends UseStepsReturn {}

interface StepsItemContext {
  index: number;
  current: boolean;
  complete: boolean;
  incomplete: boolean;
}