Quick Bar

QuickBar is a customizable sidebar component designed for navigation .

Example

A fully example of using the QuickBar

APIs

QuickBarProvider.Props

AttributeDescriptionTypeAccepted valuesDefault
hideOnMobile (optional)Boolean indicating whether to hide the QuickBar on mobile devicesboolean-true

QuickBarLayout.Props

AttributeDescriptionTypeAccepted valuesDefault
animationTime (optional)Animation duration in millisecondsnumber-250

QuickBar.Props

AttributeDescriptionTypeAccepted valuesDefault
header (optional)React node to be displayed as the header of the QuickBar.ReactNode--

QuickAction.Props

AttributeDescriptionTypeAccepted valuesDefault
tooltip (optional)Tooltip text or React node to be displayed on hover.string , React.ReactNode--
exactMatch (optional)Boolean value indicating whether the link should match the URL exactly.boolean-true
radius (optional)Number indicating the border-radius of the QuickActionButton component.number--
target (optional)HTML anchor target attribute valueHTMLAttributeAnchorTarget , undefined-_self
highlightLeft (optional)Number indicating the highlight position from the left side.number--10
href (optional)URL to navigate when the QuickActionButton is clicked.string--
type (optional)URL to navigate when the QuickActionButton is clicked.default, success, warning, error, dark, lite-default