eds-sidebar

Explore the Interactive Component

Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.

See It in Use with Code

Check out the practical implementations of component.

Passing Items as a JSON String (Plain HTML)

When you’re using the component directly in HTML (or in frameworks that don’t support property binding), you must pass the items as a JSON string:

Passing Items as an Object (Using Property Binding)

In frameworks like React or Angular, you can take advantage of property binding to pass the items directly as an object:

In React

In Vue

Properties

Property	Attribute	Description	Type	Default
`activeUrl`	`active-url`	Current active URL for routing	`string`	`''`
`enableRouting`	`enable-routing`	Enable/disable routing behavior	`boolean`	`true`
`items`	`items`	Sidebar items data structure Can be passed as JSON string in HTML or as object via JavaScript	`SidebarItem[] \| string`	`'[]'`
`maxLevel`	`max-level`	Maximum nesting level to display	`number`	`4`
`theme`	`theme`	Theme variant: ‘default’ or ‘minimal’	`"default" \| "ebrains" \| "minimal"`	`'default'`

Events

Event	Description	Type
`sidebar`	Event emitted when the routing is changed.	`CustomEvent<string>`

Dependencies

Depends on

Graph

graph TD;
  eds-sidebar --> eds-icon-wrapper
  eds-sidebar --> eds-link
  eds-link --> eds-icon-wrapper
  style eds-sidebar fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS