Interface CommonProps

interface CommonProps {
    actionButtons?: [ActionButtonProps?, ActionButtonProps?, ActionButtonProps?];
    ariaLabel?: string;
    buttonAlignment?: "bottom" | "top" | "center";
    choices: (Element | NavBarChoice)[];
    elevated?: boolean;
    href?: string;
    logoAlt?: string;
    logoAriaLabel?: string;
    logoHref?: string;
    logoLinkComponent?: ElementType<any, (keyof IntrinsicElements)>;
    rel?: string;
    reloadDocument?: boolean;
    routerNavLinkComponent: ElementType<any, keyof IntrinsicElements>;
    sx?: SxProps<Theme>;
    target?: string;
    to?: unknown;
}

Hierarchy

  • Omit<NavigationProps, ExcludedNavigationProps>
    • CommonProps

Properties

actionButtons? ariaLabel? buttonAlignment? choices elevated? href? logoAlt? logoAriaLabel? logoHref? logoLinkComponent? rel? reloadDocument? routerNavLinkComponent sx? target? to?

Properties

OptionalactionButtons

actionButtons?: [ActionButtonProps?, ActionButtonProps?, ActionButtonProps?]

Optional buttons on the right of the AppBar. Max 3 buttons.

OptionalariaLabel

ariaLabel?: string

Aria label attribute for enhanced accessibility.

OptionalbuttonAlignment

buttonAlignment?: "bottom" | "top" | "center"

Specifies the position of the navigation buttons in the navigation rail.

choices

choices: (Element | NavBarChoice)[]

List of navigation choice objects ({ name, route, icon, hasBadge }) to display, could be objects or react elements.

Optionalelevated

elevated?: boolean

Adjusts the shadow effect and border appearance on top/bottom of the navigation.

Optionalhref

href?: string

The URL that the hyperlink points to.

OptionallogoAlt

logoAlt?: string

Alternate text for the logo image.

OptionallogoAriaLabel

logoAriaLabel?: string

Aria-label for the logo image for accessibility.

OptionallogoHref

logoHref?: string

URL where the logo link points to.

OptionallogoLinkComponent

logoLinkComponent?: ElementType<any, (keyof IntrinsicElements)>

Component for managing the navigation of the logo link. For example nav link from "react-router-dom" or equivalent from other routing library.

Optionalrel

rel?: string

Specifies the relationship between the current document and the linked document.

OptionalreloadDocument

reloadDocument?: boolean

Reloads document on link click.

routerNavLinkComponent

routerNavLinkComponent: ElementType<any, keyof IntrinsicElements>

Component for managing the navigation links. For example nav link from "react-router-dom" or equivalent from other routing library.

Optionalsx

sx?: SxProps<Theme>

The system prop that allows defining system overrides as well as additional CSS styles.

Optionaltarget

target?: string

Specifies where to open the linked document.

Optionalto

to?: unknown

The 'to' prop can be used for routing in single page applications.

Settings

Member Visibility

On This Page

Properties