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

A react component library for iTwinUI

import * as React from 'react';
import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
type HeaderTranslations = {
    /**
     * 'More' menu button aria-label.
     */
    moreOptions: string;
};
type HeaderProps = {
    /**
     * Application logo.
     * (expects `HeaderLogo`)
     * @example
     * <HeaderLogo logo={<SvgImodelHollow />}>iTwin Application</HeaderLogo>
     */
    appLogo: React.ReactNode;
    /**
     * Content on the right of the application button
     * (expects `HeaderBreadcrumbs`)
     * @example
     * <HeaderBreadcrumbs items={[
     *   <HeaderButton key='project' name='Project A' />
     *   <HeaderButton key='imodel' name='IModel X' />
     * ]} />
     */
    breadcrumbs?: React.ReactNode;
    /**
     * Content displayed to the left of the `menuItems`
     * (expects array of icons/avatars wrapped in `IconButton` and/or `DropdownMenu`).
     *
     * @example
     * [
     *  <IconButton><SvgNotification /></IconButton>,
     *  <DropdownMenu>
     *   <IconButton>
     *    <SvgHelpCircularHollow />
     *   </IconButton>
     *  </DropdownMenu>,
     *  <DropdownMenu menuItems={...}>
     *    <IconButton styleType='borderless'>
     *      <Avatar ... />
     *    </IconButton>
     *  </DropdownMenu>
     * ]
     */
    actions?: React.ReactNode[];
    /**
     * Children is put in the center of the Header.
     */
    children?: React.ReactNode;
    /**
     * Items in the more dropdown menu.
     * Pass a function that takes the `close` argument (to close the menu),
     * and returns a list of `MenuItem` components.
     */
    menuItems?: (close: () => void) => React.JSX.Element[];
    /**
     * If true, the header height is reduced, typically used when viewing 3D content.
     * @default false
     */
    isSlim?: boolean;
    /**
     * Provide localized strings.
     */
    translatedStrings?: HeaderTranslations;
};
/**
 * Application header
 * @example
 * <Header
 *  appLogo={<HeaderLogo logo={<SvgImodelHollow />}>iTwin Application</HeaderLogo>}
 *  breadcrumbs={
 *   <HeaderBreadcrumbs items={[
 *    <HeaderButton key='project' name='Project A' />,
 *    <HeaderButton key='imodel' name='IModel X' />
 *   ]} />
 *  }
 *  actions={[
 *   <IconButton><SvgNotification /></IconButton>,
 *   <DropdownMenu>
 *    <IconButton>
 *     <SvgHelpCircularHollow />
 *    </IconButton>
 *   </DropdownMenu>,
 *   <DropdownMenu menuItems={…}>
 *    <IconButton styleType='borderless'>
 *     <Avatar … />
 *    </IconButton>
 *   </DropdownMenu>
 *  ]}
 *  isSlim
 * />
 */
export declare const Header: PolymorphicForwardRefComponent<"header", HeaderProps>;
export {};