NavigationToolbar

Interfaces

NavigationToolbarProps

Extends

• ToolbarProps

Properties

Property	Type	Description
ComposerIconButtonProps?	ComposerIconButtonProps	Props to spread to the ComposerIconButton Default {}
NavigationMenuIconButtonComponent?	(inProps: NavigationMenuIconButtonProps) => Element	Component for Navigation Menu Icon Button
NavigationSettingsIconButtonComponent?	(inProps: NavigationSettingsIconButtonProps) => Element	Component for Navigation Settings
NotificationMenuProps?	Omit<NotificationsMenuProps, "open" | "onClick" | "transformOrigin" | "onClose" | "anchorOrigin" | "anchorEl">	Props to spread to the NotificationsMenu Default {}
SearchAutocompleteProps?	SearchAutocompleteProps	Searchbar props
disableComposer?	boolean	Disable composer action if possible
disableSearch?	boolean	Disable search action if possible
endActions?	ReactNode	Actions to be inserted after Private Messages IconButton
onCloseNotificationMenu?	() => void	Callback on close notification menu
onOpenNotificationMenu?	() => void	Callback on open notification menu
startActions?	ReactNode	Actions to be inserted before composer IconButton
value	string	The navigation path

Functions

NavigationToolbar()

NavigationToolbar(inProps): Element

API documentation for the Community-JS NavigationToolbar component. Learn about the available props and the CSS API.

This component renders the application header. Take a look at our demo component here

Import

import {NavigationToolbar} from '@selfcommunity/react-ui';

Component Name

The name SCNavigationToolbar can be used when providing style overrides in the theme.

CSS

Rule Name	Global class	Description
root	.SCNavigationToolbar-root	Styles applied to the root element.
logo	.SCNavigationToolbar-logo	Styles applied to the logo element.
register	.SCNavigationToolbar-register	Styles applied to the register button elements.
navigation	.SCNavigationToolbar-navigation	Styles applied to the navigation container element
home	.SCNavigationToolbar-home	Styles applied to the home button
explore	.SCNavigationToolbar-explore	Styles applied to the explore button
search	.SCNavigationToolbar-search	Styles applied to the search component
composer	.SCNavigationToolbar-composer	Styles applied to the composer component
profile	.SCNavigationToolbar-profile	Styles applied to the profile button
notification	.SCNavigationToolbar-notification	Styles applied to the notification button
notificationsMenu	.SCNavigationToolbar-notifications-menu	Styles applied to the notifications menu
messages	.SCNavigationToolbar-messages	Styles applied to the messages button
settings	.SCNavigationToolbar-settings	Styles applied to the settings button
active	.SCNavigationToolbar-active	Styles applied to the active button on navigation

Parameters

Parameter	Type	Description
inProps	NavigationToolbarProps

Returns

Element

Source

packages/react-ui/src/components/NavigationToolbar/NavigationToolbar.tsx:156

---

NavigationToolbarSkeleton()

NavigationToolbarSkeleton(): JSX.Element

API documentation for the Community-JS Navigation Toolbar Skeleton component. Learn about the available props and the CSS API.

Import

import {MobileHeaderSkeleton} from '@selfcommunity/react-ui';

Component Name

The name SCNavigationToolbar-skeleton-root can be used when providing style overrides in the theme.

CSS

Rule Name	Global class	Description
root	.SCNavigationToolbar-skeleton-root	Styles applied to the root element.
logo	.SCNavigationToolbar-logo	Styles applied to the logo element.
navigation	.SCNavigationToolbar-navigation	Styles applied to the navigation element.
avatar	.SCNavigationToolbar-avatar	Styles applied to the avatar element.

Returns

JSX.Element

Source

packages/react-ui/src/components/NavigationToolbar/Skeleton.tsx:42