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