< bonaparte-sidebar >

The sidebar component divides the space into two areas: sidebar and content. The sidebar can be positioned on either side of the content. As opposed to the panel, the sidebar does not overlay the content but pushes it. There can be multiple sidebars open at the same time and they can be nested.

If you plan to only have buttons in the sidebar have a look at <toolbar-bonaparte> instead.

Structure

<bonaparte-sidebar
  position
  open
>
  <1st-child> <!-- sidebar -->
  
  <2nd-child> <!-- content --> 
  
</bonaparte-sidebar>

<1st-child> Sidebar

Place on one side of the content according to the sidebar attribute.

<2nd-child> Content

Holds the main content. The sidebar is placed around this element.

Attributes

open

Defines if the sidebar is open/visible.

• Default true
• Values false true

position

Defines the position of the sidebar relative to the content area.

• Default left
• Values top right bottom left

Events

bonaparte.sidebar.open

Triggers when the sidebar opens.

• Source <bonaparte-sidebar>
• Bubbles Yes

bonaparte.sidebar.close

Triggers when the sidebar closes.

• Source <bonaparte-sidebar>
• Bubbles Yes