@itwin/itwinui-react/esm/core/SideNavigation/SideNavigation.d.ts

A react component library for iTwinUI

import * as React from 'react';
import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
export declare const SidenavExpandedContext: React.Context<boolean | undefined>;
type SideNavigationProps = {
    /**
     * Buttons shown in the top portion of sidenav.
     * Recommended to use `SidenavButton` components.
     */
    items: React.ReactNode[];
    /**
     * Buttons shown at the bottom of sidenav.
     */
    secondaryItems?: React.ReactNode[];
    /**
     * Control the placement of "expander" icon button (or hide it).
     * @default 'top'
     */
    expanderPlacement?: 'top' | 'bottom' | 'hidden';
    /**
     * Controlled flag to expand/collapse the sidenav.
     */
    isExpanded?: boolean;
    /**
     * Callback fired when the "expander" icon is clicked.
     */
    onExpanderClick?: () => void;
    /**
     * Submenu to show supplemental info associated to the main item.
     *
     * Should be used with the `isSubmenuOpen` props from both `SideNavigation` and `SidenavButton`.
     * @example
     * <SideNavigation
     *   // …
     *   submenu={(
     *     <SidenavSubmenu>
     *       <SidenavSubmenuHeader>Documents</SidenavSubmenuHeader>
     *       <span>List of documents</span>
     *     </SidenavSubmenu>
     *   )}
     *   isSubmenuOpen={true}
     * />
     */
    submenu?: React.JSX.Element;
    /**
     * Set to true to display the provided `submenu`.
     *
     * Note that there is an identical prop in `SidenavButton` which should also
     * be set to true for proper styling when submenu is open but page is not active yet.
     * @default false
     */
    isSubmenuOpen?: boolean;
    /**
     * Passes props for SideNav wrapper.
     */
    wrapperProps?: React.ComponentProps<'nav'>;
    /**
     * Passes props for SideNav content.
     */
    contentProps?: React.ComponentProps<'div'>;
    /**
     * Passes props for SideNav top.
     */
    topProps?: React.ComponentProps<'div'>;
    /**
     * Passes props for SideNav bottom.
     */
    bottomProps?: React.ComponentProps<'div'>;
};
/**
 * Left side navigation menu component.
 *
 * Renders a `<nav>` landmark, which can be labelled using `wrapperProps['aria-labelledby']`
 * or `wrapperProps['aria-label']`.
 *
 * @example
 * <SideNavigation
 *   items={[
 *     <SidenavButton startIcon={<SvgPlaceholder />}>App 1</SidenavButton>,
 *     <SidenavButton startIcon={<SvgPlaceholder />}>App 2</SidenavButton>,
 *     <SidenavButton startIcon={<SvgPlaceholder />}>App 3</SidenavButton>,
 *   ]}
 *   secondaryItems={[
 *     <SidenavButton startIcon={<SvgSettings />}>Settings</SidenavButton>,
 *   ]}
 * />
 */
export declare const SideNavigation: PolymorphicForwardRefComponent<"div", SideNavigationProps>;
export {};