import * as React from 'react';
export type NavigationBarProps = {
    /**
     * Product logo: Can be one of the logos shipped in this library or custom element. If using custom logo make sure to hook logo up to navigation using `ToolbarItem`
     */
    logo?: React.JSX.Element;
    /**
     * Customizable content of the navigation (between product logo and user menu).
     *
     * The content should be grouped in one `ToolbarSectionLeft` (wrapping content to the left) and one `ToolbarSectionRight` (wrapping content to the right)
     *
     */
    children: React.ReactNode;
    /**
     * Element to inject ApplicationSwitcher to the correct place in the navigation bar
     */
    productSwitcher?: React.JSX.Element;
    /**
     * If the left most separator should be displayed, defaults to true.
     *
     * it is [best practice](https://design.planview.com/components/navigation/navigation-bar#left-section) to remove the separator when there is nothing to display in the left content of the main navigation.
     */
    showLogoSeparator?: boolean;
} & React.HTMLAttributes<HTMLElement>;
/**
 * The NavigationBar implements the [design system specification](https://design.planview.com/components/navigation/navigation-bar/anatomy)
 *
 * `import { NavigationBar } from '@planview/pv-toolbar'`
 *
 * ### Accessibility
 * This component will add a [navigation landmark](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/navigation.html) to your application which will serve as a single tab-stop for easy keyboard navigation.
 * Having [landmarks](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/) will help user using assistive technology jump quicker between the different landmarks on the page.
 *
 * If you have more than one navigation on your page at the same time it is considered good practice to add `aria-label` attributes on the navigation landmarks
 *
 *
 */
export declare const NavigationBar: React.ForwardRefExoticComponent<{
    /**
     * Product logo: Can be one of the logos shipped in this library or custom element. If using custom logo make sure to hook logo up to navigation using `ToolbarItem`
     */
    logo?: React.JSX.Element;
    /**
     * Customizable content of the navigation (between product logo and user menu).
     *
     * The content should be grouped in one `ToolbarSectionLeft` (wrapping content to the left) and one `ToolbarSectionRight` (wrapping content to the right)
     *
     */
    children: React.ReactNode;
    /**
     * Element to inject ApplicationSwitcher to the correct place in the navigation bar
     */
    productSwitcher?: React.JSX.Element;
    /**
     * If the left most separator should be displayed, defaults to true.
     *
     * it is [best practice](https://design.planview.com/components/navigation/navigation-bar#left-section) to remove the separator when there is nothing to display in the left content of the main navigation.
     */
    showLogoSeparator?: boolean;
} & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement | undefined>>;
//# sourceMappingURL=navigation-bar.d.ts.map