Sidebar

The Sidebar is designed for displaying additional information or editing/creating new items. The component provides animation, a close button, and consistent paddings and title positioining. Sidebars are always optional, and can be used on any Page you like.

It is intended to be used within the ApplicationFrame and along side BrandedNavBar.

See props for accessibility features.

isOpen

children


      <Select options={[{label: "first option", value: 1}]} labelText="Delivery:" />
      <Select options={[]} labelText="Delivery:" />
      <Select options={[]} labelText="Delivery:" />


      <Select options={[{label: "first option", value: 1}]} labelText="Delivery:" />
      <Select options={[]} labelText="Delivery:" />
      <Select options={[]} labelText="Delivery:" />

offset

top

hideCloseButton

closeButtonTestId

closeButtonAriaLabel

duration

footer

<PrimaryButton>Apply</PrimaryButton>

<PrimaryButton>Apply</PrimaryButton>

title

triggerRef

onClose

() => setIsOpen(false)

() => setIsOpen(false)

closeOnOutsideClick

overlay

import * as React from "react";
import {
  Sidebar,
  PrimaryButton,
  Select,
  Box
} from "@nulogy/components";

export default () => {
  const [isOpen, setIsOpen] = React.useState(false);
  return (
    <Sidebar
      isOpen={isOpen}
      hideCloseButton={false}
      footer={<PrimaryButton>Apply</PrimaryButton>}
      title="Filters"
      onClose={() => setIsOpen(false)}
    >
      <Select
        options={[{ label: "first option", value: 1 }]}
        labelText="Delivery:"
      />
      <Select options={[]} labelText="Delivery:" />
      <Select options={[]} labelText="Delivery:" />
    </Sidebar>
  );
}

import * as React from "react";
import {
  Sidebar,
  PrimaryButton,
  Select,
  Box
} from "@nulogy/components";

export default () => {
  const [isOpen, setIsOpen] = React.useState(false);
  return (
    <Sidebar
      isOpen={isOpen}
      hideCloseButton={false}
      footer={<PrimaryButton>Apply</PrimaryButton>}
      title="Filters"
      onClose={() => setIsOpen(false)}
    >
      <Select
        options={[{ label: "first option", value: 1 }]}
        labelText="Delivery:"
      />
      <Select options={[]} labelText="Delivery:" />
      <Select options={[]} labelText="Delivery:" />
    </Sidebar>
  );
}

Props

Name	Type	Default	Description
isOpen	boolean		An event handler for opening the Sidebar.
children	react node		Inner content.
offset	string	0px	The amount of pixels to offset the Sidebar from on the right of the screen. Mostly used for in the case of multiple Sidebars.
top	string	0px	The amount of pixels to offset the Sidebar from on the top of the screen. Mostly used for in the case of multiple Sidebars.
hideCloseButton	boolean	false	When true, hides the close button
closeButtonTestId	string	Sidebar-close-button	To use the close button in a test.
closeButtonAriaLabel	string	close	Aria label for the close button.
duration	number	0.25	The length of the animation for sliding in and out the Sidebar.
footer	react node		An optional sticky footer.
title	string		A heading to display at the top of the Sidebar.
triggerRef	object		The button that was used to open the Sidebar. Setting this will allow focus to return to that element when the Sidebar is closed. If it's not set, the focus will be set to the first element on the page.
onClose	function		An event handler for closing the Sidebar.
closeOnOutsideClick	boolean	true	If true, calls onClose when the user clicks anywhere but the Sidebar.
overlay	boolean	true	If true, displays an overlay behind the sidebar when it is open.

Sidebar

Props

Related Components