Skip to content

Sidebar

A container component that organises its children in a sidebar. Its parent must be a Page component.

Fields

NameTypeDescriptionOptions
Start collapsedText
  • Yes
  • No
BackgroundColor
AccentColor
Primary textColor
Secondary textColor
Container backgroundColor
Container shadowShadow
SeparatorColor
ButtonColor
Button textColor
Button shadowShadow
Custom CSS classesTextCSS classes, separated by spaces. You can define classes in custom stylesheets.

Low code usage

This component can be declared directly in Python, using backend-driven UI.

python
ui.Sidebar(content={
        "startCollapsed": "no", # str [yes, no]
        "sidebarBackgroundColor": "", # str 
        "accentColor": "", # str 
        "primaryTextColor": "", # str 
        "secondaryTextColor": "", # str 
        "containerBackgroundColor": "", # str 
        "containerShadow": "", # str 
        "separatorColor": "", # str 
        "buttonColor": "", # str 
        "buttonTextColor": "", # str 
        "buttonShadow": "", # str 
        "cssClasses": "", # str 
    }
)

Reference