@nimbus-ds/sidebar
TypeScript icon, indicating that this package has built-in type declarations

3.2.2 • Public • Published

@nimbus-ds/sidebar

@nimbus-ds/sidebar

The Sidebar component is a large floating container that goes into the page from the corners. It allows us to present actions, forms or sections with a lot of information about the context of the page.

Installation

$ yarn add @nimbus-ds/sidebar
# or
$ npm install @nimbus-ds/sidebar

Component Anatomy

The component consists of a full-screen translucent background and a floating container that occupies the full height of the screen and a fixed width, with shadow and optional padding.

On desktop it has a fixed width and occupies the entire top, on mobile it occupies the entire screen.

Guidelines

We use the Sidebar to present actions, dialogs or forms that open over the context of the page, when they are too long to use in a Modal, but the information is relevant enough not to navigate to another page.

Despite being a floating component, it partially blocks the background view, but should be used sparingly.

Recommendations for use

  • Create a menu for an app
  • Display a list of filters with many options
  • Present an interactive list with many entries and a search engine

Related components

  • Modal - It is a floating element that allows us to present actions or brief confirmation messages to the user.
  • Popover - It is a floating element that can be used to present information or actions in a non-intrusive way.

Usage

View docs here.

Nimbus

Readme

Keywords

none

Package Sidebar

Install

npm i @nimbus-ds/sidebar

Weekly Downloads

47

Version

3.2.2

License

MIT

Unpacked Size

35.5 kB

Total Files

5

Last publish

Collaborators

  • nimbus-design-system
  • tiendanube