Module: NavigationToolbar
Interfaces
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
| Name | Type |
|---|---|
inProps | NavigationToolbarProps |
Returns
Element
Defined in
packages/react-ui/src/components/NavigationToolbar/NavigationToolbar.tsx:145
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
Defined in
packages/react-ui/src/components/NavigationToolbar/Skeleton.tsx:42