@stratakit/structures/dist/NavigationList.d.ts

Medium-sized component structures for the Strata design system

import * as React from "react";
import type { BaseProps, FocusableProps } from "@stratakit/foundations/secret-internals";
interface NavigationListRootProps extends Omit<BaseProps<"div">, "children"> {
    /**
     * The navigation items to render within the list.
     * Should be an array of `NavigationList.Anchor` elements.
     */
    items: React.JSX.Element[];
}
/**
 * A navigation list displays a collection of navigation links, one of which can be "active".
 *
 * Basic example:
 * ```tsx
 * <NavigationList.Root
 *   items={[
 *     <NavigationList.Anchor key={1} href="/page1" label="Item 1" />,
 *     <NavigationList.Anchor key={2} href="/page2" label="Item 2" active />,
 *   ]}
 * />
 * ```
 *
 * Example with subgroups:
 * ```tsx
 * <NavigationList.Root
 *   items={[
 *     <NavigationList.Anchor key={1} href="/page1" label="Item 1" />,
 *     <NavigationList.Anchor key={2} href="/page2" label="Item 2" />,
 *     <NavigationList.Subgroup
 *       key={3}
 *       label="Subgroup"
 *       items={[
 *         <NavigationList.Anchor key={1} href="/page3-1" label="Item 3.1" />,
 *         <NavigationList.Anchor key={2} href="/page3-2" label="Item 3.2" />,
 *       ]}
 *     />,
 *   ]}
 * />
 * ```
 */
declare const NavigationListRoot: React.ForwardRefExoticComponent<NavigationListRootProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
interface NavigationListItemActionProps extends FocusableProps {
}
interface NavigationListAnchorProps extends Omit<FocusableProps<"a">, "children"> {
    /**
     * The label of the navigation anchor.
     */
    label: string;
    /**
     * The icon shown before the label of the navigation anchor.
     *
     * Can be a URL of an SVG from the `@stratakit/icons` package,
     * or a custom JSX icon.
     */
    icon?: string | React.JSX.Element;
    /**
     * Whether the anchor is active.
     *
     * This will automatically set `aria-current="true"` on the anchor.
     */
    active?: boolean;
}
/**
 * An individual anchor within the navigation list. This should perform a navigation
 * to a different view, page or section. (Make sure to use proper routing/navigation)
 *
 * Should be used as an element within the `items` array of `NavigationList.Root`.
 *
 * Example:
 * ```tsx
 * <NavigationList.Anchor href="/profile"> label="Profile" />
 * ```
 */
declare const NavigationListAnchor: React.ForwardRefExoticComponent<NavigationListAnchorProps & React.RefAttributes<HTMLElement | HTMLAnchorElement>>;
interface NavigationListSubgroupProps extends Omit<BaseProps, "children">, Pick<NavigationListSubgroupButtonProps, "label" | "icon"> {
    /**
     * The navigation items within the subgroup.
     * Should be an array of `NavigationList.Anchor` elements.
     */
    items: React.JSX.Element[];
    /**
     * Whether the subgroup is expanded by default.
     */
    defaultOpen?: boolean;
}
/**
 * A subgroup within the navigation list, used to group related navigation items.
 *
 * Should be used as an element within the `items` array of `NavigationList.Root`.
 *
 * Example:
 * ```tsx
 * <NavigationList.Subgroup label="Management" items={[ … ]} />
 * ```
 */
declare const NavigationListSubgroup: React.ForwardRefExoticComponent<NavigationListSubgroupProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
interface NavigationListSubgroupButtonProps extends Omit<NavigationListItemActionProps, "children"> {
    /**
     * The label for the subgroup.
     */
    label: string;
    /**
     * The icon shown before the label of the subgroup.
     *
     * Can be a URL of an SVG from the `@stratakit/icons` package,
     * or a custom JSX icon.
     */
    icon?: string | React.JSX.Element;
}
export { NavigationListAnchor as Anchor, NavigationListRoot as Root, NavigationListSubgroup as Subgroup, };