`<Navbar>` Component

<Navbar> is a responsive navigation header. Supports for branding, navigation and more.

Actually the <Navbar> is a container component with responsive detection. You need to supply the nested components such as logo, <HamburgerMenuButton>, <Nav>, or any custom components you want.

Here the demo:

Installing `<Navbar>` Component

There are 2 ways to install <Navbar> component into your react app project:

Install the Specific Package of <Navbar> Component
Install the Whole Reusable-UI Component Pack, including the <Navbar> Component

Defines the Navbar-ed UI

The <Navbar> should have one render function to dynamically generate nested components based on <Navbar>'s state.

The render function will receive a props containing these properties:

basicVariantProps: BasicVariantProps
- size
  The current [size] of the <Navbar>.
- theme
  The current [theme] of the <Navbar>.
- gradient
  The current [gradient] of the <Navbar>.
- outlined
  The current [outlined] of the <Navbar>.
- mild
  The current [mild] of the <Navbar>.
navbarExpanded: boolean
The current [expanded] state of the <Navbar>.
listExpanded: boolean
The current [expanded] state of the <Navbar>'s list.
toggleList: EventHandler<boolean|undefined>
A callback function to toggle or set the [expanded] state of the <Navbar>'s list.
handleActiveChange: EventHandler<ActiveChangeEvent>
A callback function to sync the [active] state to the [expanded] state of the <Navbar>'s list.
handleClickToToggleList: React.MouseEventHandler<Element>
A callback function to handle click event from <HamburgerMenuButton> (or any clickable elements) to toggle the [expanded] state of the <Navbar>'s list.
The event will automatically ignored if defaultPrevented === true and will automatically preventDefault() after the toggling state was performed.

Then the render function should return a JSX Element for displaying the desired components. See the code example below:

Show code

`expanded` Property

Programatically controls the <Navbar> to show the expanded/collapsed mode.

The possible values are:

undefined
true
false

Here the preview:

<Navbar expanded={true}>

Show code

`breakpoint` Property

Statically defines the minimum width (as defined in breakpoints config) of the <Navbar> to responsively expand itself based on the available browser's width.

If not defined (or <Navbar breakpoint={undefined}>), the <Navbar> uses <ResponsiveProvider> to dynamically detect the occurrence of overflowed elements and determines the best widest mode without causing overflowed.

Variant Properties

The alternative appearances of the <Navbar> layout without changing the <Navbar>'s functionality.

`size` Property

Defines the alternative size of the <Navbar>.

The possible values are:

undefined
'sm'
'md'
'lg'

Here the preview:

Show code

`theme` Property

Defines the contextual theme of the <Navbar>.

The possible values are:

undefined
'primary'
'secondary'
'success'
'info'
'warning'
'danger'
'light'
'dark'

Here the preview:

Show code

`gradient` Property

Activates a 3D mode of the <Navbar>.

The possible values are:

undefined
'inherit'
true
false

Here the preview:

Show code

`outlined` Property

Activates an outlined mode (background-less, contrast foreground, and contrast border) of the <Navbar>.

The possible values are:

undefined
'inherit'
true
false

Here the preview:

Show code

`mild` Property

Activates a mild mode (mild background, contrast foreground, and contrast border) of the <Navbar>.

The possible values are:

undefined
'inherit'
true
false

Here the preview:

Show code

Component Properties

Overwrites the internal (sub) components used as the composition of <Navbar> component.

`basicComponent` Property

Overwrites the internal <Content> component used as the composition of <Navbar> component.

<Navbar basicComponent={
    <MyCustomContent />
} />

Inherited Properties

Because <Navbar> is made from <Basic>, so all properties from <Basic> are inherited.

You can see the documentation of <Basic> here.

Variables

There are several variables of <Navbar> you can customize. Changing the variables affects all <Navbar> instance and other components that depend on <Navbar>.

Here the exposed variables:

Layouts
- display
  The display mode of the <Navbar>.
  The default is grid but you can change to flex or whatever you want.
- gridAutoFlow
  The placement of each items (logo, toggler, etc).
  The default is placed to the next column.
- gridAutoColumns
  The width of each items (logo, toggler, etc) should take a space.
  The default is auto.
- gridTemplateRows
  The placeholder of rows.
  The default is single row of 1fr.
- justifyContent
  Specifies how the extra horizontal space should be distributed between the items (logo, toggler, etc).
  The default is space-between.
- alignContent
  Specifies how the extra vertical space should be distributed between the items (logo, toggler, etc).
  The default is center.
- justifyItems
  Specifies the default horizontal alignment for each items (logo, toggler, etc).
  The default is center.
- alignItems
  Specifies the default vertical alignment for each items (logo, toggler, etc).
  The default is center.
Positions
- zIndex
  Specifies the overlapping importance weight when the <Navbar> overlaps to another elements.
  The default is 1020.
- position
  Specifies how the <Navbar> flows to the document.
  The default is sticky.
- insetBlockStart
  Specifies where the <Navbar> should be sticky to the document.
  The default is 0px.
Sizes
- boxSizing
  Specifies the measusing method of the <Navbar>'s size.
  The default is content-box (excluding the padding & borderWidth).
- blockSize
  The height of the whole <Navbar>.
  The default is auto.
Backgrounds, Foregrounds, Borders, & Rings
- borderWidth
  The thickness of border (stroke).
- borderRadius
  The default rounded corner radius.
- boxShadow
  The boxShadow to apply, so that the <Navbar> appears hovering on the top of content.
Spacings
- paddingInline
  The inner spacing on the left & right of the <Navbar>.
- paddingBlock
  The inner spacing on the top & bottom of the <Navbar>.
- gapInline
  The horizontal spacing between the items (logo, toggler, etc).
- gapBlock
  The vertical spacing between the items (logo, toggler, etc).
Lists
- listGridArea
  Defines the gridArea of the <Navbar>'s list (the container of the <Nav> - responsible for showing/hidding the <Nav>) when on mobile mode.
  The default is 2/1/2/3, which means spanning from the logo to the toggler and placed at the second (implicit) row.
- listGridAreaExpand
  Defines the gridArea of the <Navbar>'s list (the container of the <Nav>) when on desktop mode.
  The default is unset, which means placed as defined inside the <Navbar>.
- listDisplay
  The display mode of the <Navbar>'s list.
  The default is flex but you can change to grid or whatever you want.
- listFlexDirection
  The flex direction of the <Navbar>'s list when on mobile mode.
  The default is column.
- listFlexDirectionExpand
  The flex direction of the <Navbar>'s list when on desktop mode.
  The default is row.
- listJustifySelf
  Specifies the horizontal alignment of the <Navbar>'s list.
  The default is stretch.
- listAlignSelf
  Specifies the vertical alignment of the <Navbar>'s list.
  The default is stretch.
- listMarginInline
  The outer spacing on the left & right of the <Navbar>'s list when on mobile mode.
- listMarginInlineExpand
  The outer spacing on the left & right of the <Navbar>'s list when on desktop mode.
- listMarginBlock
  The outer spacing on the top & bottom of the <Navbar>'s list when on mobile mode.
- listMarginBlockExpand
  The outer spacing on the top & bottom of the <Navbar>'s list when on desktop mode.
(floating) Lists
- listPosition
  Specifies how the <Navbar>'s list flows to the document when on mobile mode.
  The default is absolute.
- listPositionExpand
  Specifies how the <Navbar>'s list flows to the document when on desktop mode.
  The default is unset.
- listInsetInline
  Specifies where the <Navbar>'s list should be positioned horizontally to the document when on mobile mode.
  The default is 0px.
- listInsetInlineExpand
  Specifies where the <Navbar>'s list should be positioned horizontally to the document when on desktop mode.
  The default is unset.
- listInsetBlockStart
  Specifies where the <Navbar>'s list should be top positioned to the document when on mobile mode.
  The default is 0px.
- listInsetBlockStartExpand
  Specifies where the <Navbar>'s list should be top positioned to the document when on desktop mode.
  The default is unset.
Menus
- menuDisplay
  The display mode of the <Navbar>'s menu (the clickable navigation).
  The default is flex but you can change to grid or whatever you want.
- menuFlexDirection
  The flex direction of the <Navbar>'s menu.
  The default is row.
- menuJustifyContent
  Specifies how the extra horizontal space should be distributed between the children of the <Navbar>'s menu.
  The default is center.
- menuAlignItems
  Specifies the default vertical alignment for each child of the <Navbar>'s menu.
  The default is center.
- menuFlexWrap
  Specifies whether the children of the <Navbar>'s menu can be forced onto one line or can wrap onto multiple lines.
  The default is nowrap.
- menuWhiteSpace
  Defines how a white space inside the child of the <Navbar>'s menu is handled.

The example of accessing, modifying, & adding variables:

Show code

<Navbar> Component

Installing <Navbar> Component

Defines the Navbar-ed UI

expanded Property

breakpoint Property

Variant Properties

size Property

theme Property

gradient Property

outlined Property

mild Property

Component Properties

basicComponent Property

Inherited Properties

Variables

`<Navbar>` Component

Installing `<Navbar>` Component

`expanded` Property

`breakpoint` Property

`size` Property

`theme` Property

`gradient` Property

`outlined` Property

`mild` Property

`basicComponent` Property