<HamburgerMenuButton>
Component
<HamburgerMenuButton>
is a toggleable button for showing/hiding menu in <Navbar>
.
Here the demo:
<HamburgerMenuButton>
Component<HamburgerMenuButton>
is a toggleable button for showing/hiding menu in <Navbar>
.
Here the demo:
<HamburgerMenuButton>
ComponentThere are 2 ways to install <HamburgerMenuButton>
component into your react app project:
<HamburgerMenuButton>
Component<HamburgerMenuButton>
ComponentdefaultActive
PropertyDefines the initial active
state when the <HamburgerMenuButton>
is first loaded.
The possible values are:
undefined
true
false
onActiveChange
PropertyExecutes a JavaScript's callback function when the active
state changed.
onClick
PropertyExecutes a JavaScript's callback function when the <HamburgerMenuButton>
is clicked.
The alternative appearances of the <HamburgerMenuButton>
layout without changing the <HamburgerMenuButton>
's functionality.
buttonStyle
PropertySets the alternative appearances of the <HamburgerMenuButton>
.
The possible values are:
undefined
'regular'
'link'
'ghost'
Here the preview:
size
PropertyDefines the alternative size of the <HamburgerMenuButton>
.
The possible values are:
undefined
'sm'
'md'
'lg'
Here the preview:
theme
PropertyDefines the contextual theme of the <HamburgerMenuButton>
.
The possible values are:
undefined
'primary'
'secondary'
'success'
'info'
'warning'
'danger'
'light'
'dark'
Here the preview:
gradient
PropertyActivates a 3D mode of the <HamburgerMenuButton>
.
The possible values are:
undefined
'inherit'
true
false
Here the preview:
outlined
PropertyActivates an outlined mode (background-less, contrast foreground, and contrast border) of the <HamburgerMenuButton>
.
The possible values are:
undefined
'inherit'
true
false
Here the preview:
mild
PropertyActivates a mild mode (mild background, contrast foreground, and contrast border) of the <HamburgerMenuButton>
.
The possible values are:
undefined
'inherit'
true
false
Here the preview:
nude
PropertyActivates an nude mode (background-less, padding-less, and border-less) of the <HamburgerMenuButton>
.
The possible values are:
undefined
true
false
Here the preview:
The conditions of the <HamburgerMenuButton>
behavior or functionality.
enabled
PropertyDefines the enabled/disabled state of the <HamburgerMenuButton>
.
The possible values are:
undefined
true
false
Here the preview:
inheritEnabled
PropertyInfluences the <HamburgerMenuButton>
's disabled state by <ancestor enabled={false}>
.
The possible values are:
undefined
true
false
Here the preview:
active
PropertyDefines the current active state of the <HamburgerMenuButton>
.
The possible values are:
undefined
true
false
Here the preview:
inheritActive
PropertyInfluences the <HamburgerMenuButton>
's active state by <ancestor active={true}>
.
The possible values are:
undefined
true
false
Here the preview:
Overwrites the internal (sub) components used as the composition of <HamburgerMenuButton>
component.
buttonComponent
PropertyOverwrites the internal <Button>
component used as the composition of <HamburgerMenuButton>
component.
<HamburgerMenuButton buttonComponent={
<MyCustomButton />
} />
Because <HamburgerMenuButton>
is made from <ToggleButton>
, so all properties from <ToggleButton>
are inherited.
There are several variables of <HamburgerMenuButton>
you can customize. Changing the variables affects all <HamburgerMenuButton>
instance and other components that depend on <HamburgerMenuButton>
.
Here the exposed variables:
The example of accessing, modifying, & adding variables: