@primer/react-brand/lib/AnchorNav/AnchorNav.d.ts

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import React from 'react';
import { ButtonBaseProps } from '../';
import type { BaseProps } from '../component-helpers';
/**
 * Design tokens
 */
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/anchor-nav/colors-with-modes.css';
export type AnchorNavProps = BaseProps<HTMLElement> & {
    /**
     * Accepts all of `AnchorNav.Item` and `AnchorNav.Action` child components.
     */
    children: React.ReactNode[];
    /**
     * Enable the idle state background color, which is transparent by default.
     */
    enableDefaultBgColor?: boolean;
    /**
     * When true, the anchor nav will hide until it is sticky.
     */
    hideUntilSticky?: boolean;
} & React.ComponentPropsWithoutRef<'nav'>;
declare function _AnchorNav({ children, enableDefaultBgColor, hideUntilSticky, ...rest }: AnchorNavProps): import("react/jsx-runtime").JSX.Element;
type AnchorNavLinkIntersectionOptions = {
    /**
     * The area of the element that should trigger the next linked section to be highlighted.
     */
    rootMargin: 'start' | 'middle';
};
type AnchorNavLinkProps = BaseProps<HTMLAnchorElement> & {
    /**
     * Optional text alignment for the link. Defaults to 'start' if there are less than 4 links, otherwise 'center'.
     */
    alignment?: 'start' | 'center';
    /**
     * Required path or location for the anchor to link to.
     */
    href: string;
    /**
     * Optional boolean to indicate if the link is the current active link.
     * Typically doesn't need to be sset unless custom animation is being used.
     */
    isActive?: boolean;
    toggleMenuCallback?: () => void;
    intersectionOptions?: AnchorNavLinkIntersectionOptions;
    prefersReducedMotion?: boolean;
    updateCurrentActiveNav?: (id: string | null) => void;
} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>;
declare function _AnchorNavLink({ alignment, children, href, isActive, toggleMenuCallback, prefersReducedMotion, intersectionOptions, updateCurrentActiveNav, ...rest }: AnchorNavLinkProps): import("react/jsx-runtime").JSX.Element;
type AnchorNavActionProps = {
    /**
     * Required path or location for the action button to link to.
     */
    href: string;
} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> & ButtonBaseProps;
declare function _AnchorNavAction({ children, href, variant, size, ...rest }: AnchorNavActionProps): import("react/jsx-runtime").JSX.Element;
declare function _AnchorNavActionSecondary({ children, href, variant, size, ...rest }: AnchorNavActionProps): import("react/jsx-runtime").JSX.Element;
/**
 * AnchorNav allows users to navigate to different sections of a page.
 * @see https://primer.style/brand/components/AnchorNav
 */
export declare const AnchorNav: typeof _AnchorNav & {
    Link: typeof _AnchorNavLink;
    Action: typeof _AnchorNavAction;
    SecondaryAction: typeof _AnchorNavActionSecondary;
    testIds: {
        root: string;
        readonly menuButton: string;
        readonly menuLinks: string;
        readonly action: string;
        readonly secondaryAction: string;
        readonly navSpacer: string;
    };
};
export {};