Ready
Popular
Canvas Component
v1.0.0
7 menu items
Purple theme
User profile
Dynamic data
Sidebar
Material Design dark sidebar with brand header and user profile
A professional dark sidebar navigation component with Material Design styling. Features a brand header, user profile section, dynamic menu items with icons, active state highlighting, and footer actions. Perfect for admin panels, dashboards, and multi-page applications.
Brand header
User profile
Dynamic menu items
SVG icons
Active state
Rounded corners
Key Properties
BrandName"Material Dash"
MenuItems[Table]
SelectedMenuID1
SidebarColor#312762
UserName"Clyde Miles"
UserEmail"clydemiles@elenor.us"
OnMenuSelectEvent
Width240
Requires Modern controls enabled. Go to Settings → Updates → Preview → Modern controls and themes.
Component YAML
Copy-paste readyComponentDefinitions:
cmpSidebar:
DefinitionType: CanvasComponent
AccessAppScope: true
CustomProperties:
BrandName:
PropertyKind: Input
DisplayName: Brand Name
Description: Application name displayed at the top
DataType: Text
Default: ="Material Dash"
MenuItems:
PropertyKind: Input
DisplayName: Menu Items
Description: Dynamic table of sidebar navigation items
DataType: Table
Default: |-
=Table(
{
ID: 1,
Title: "Dashboard",
IconName: "home",
HasChildren: false
},
{
ID: 2,
Title: "Forms",
IconName: "forms",
HasChildren: false
},
{
ID: 3,
Title: "UI Features",
IconName: "layers",
HasChildren: false
},
{
ID: 4,
Title: "Tables",
IconName: "table",
HasChildren: false
},
{
ID: 5,
Title: "Charts",
IconName: "chart",
HasChildren: false
},
{
ID: 6,
Title: "Sample Pages",
IconName: "pages",
HasChildren: false
},
{
ID: 7,
Title: "Documentation",
IconName: "document",
HasChildren: false
}
)
OnMenuSelect:
PropertyKind: Event
DisplayName: On Menu Select
Description: Action executed when a menu item is selected
ReturnType: None
Default: =false
SelectedMenuID:
PropertyKind: Input
DisplayName: Selected Menu ID
Description: ID of the currently active menu item
DataType: Number
Default: =1
SidebarColor:
PropertyKind: Input
DisplayName: Sidebar Color
Description: Background color of the sidebar
DataType: Color
Default: =RGBA(49, 39, 98, 1)
UserEmail:
PropertyKind: Input
DisplayName: User Email
Description: Current user email address
DataType: Text
Default: ="clydemiles@elenor.us"
UserName:
PropertyKind: Input
DisplayName: User Name
Description: Current user display name
DataType: Text
Default: ="Clyde Miles"
Properties:
Fill: =cmpSidebar.SidebarColor
Height: =App.Height
Width: =240
Children:
- cntSidebar_1:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
DropShadow: =DropShadow.None
Fill: =cmpSidebar.SidebarColor
Height: =Parent.Height
RadiusBottomLeft: =40
RadiusBottomRight: =40
RadiusTopLeft: =40
RadiusTopRight: =40
Width: =Parent.Width
Children:
- cntBrand:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
DropShadow: =DropShadow.None
Fill: =Color.Transparent
Height: =56
Width: =Parent.Width
Children:
- imgBrandIcon:
Control: Image@2.2.3
Properties:
BorderColor: =Color.Transparent
Height: =28
Image: |-
="data:image/svg+xml;utf8," &
EncodeUrl(
"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>" &
"<circle cx='12' cy='12' r='9'/>" &
"<circle cx='12' cy='12' r='3'/>" &
"</svg>"
)
Width: =28
X: =18
Y: =14
- txtBrand:
Control: Text@0.0.51
Properties:
Font: =Font.'Segoe UI'
FontColor: =RGBA(255, 255, 255, 1)
Height: =40
Size: =17
Text: =cmpSidebar.BrandName
VerticalAlign: =VerticalAlign.Middle
Weight: ='TextCanvas.Weight'.Semibold
Width: =170
X: =54
Y: =8
- cntUser:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
DropShadow: =DropShadow.None
Fill: =Color.Transparent
Height: =68
Width: =Parent.Width
Y: =60
Children:
- txtUserName:
Control: Text@0.0.51
Properties:
Font: =Font.'Segoe UI'
FontColor: =RGBA(255, 255, 255, 1)
Height: =24
Size: =11
Text: =cmpSidebar.UserName
VerticalAlign: =VerticalAlign.Middle
Weight: ='TextCanvas.Weight'.Semibold
Width: =200
X: =18
Y: =4
- txtUserEmail:
Control: Text@0.0.51
Properties:
Font: =Font.'Segoe UI'
FontColor: =RGBA(220, 215, 235, 1)
Height: =22
Size: =9
Text: =cmpSidebar.UserEmail
VerticalAlign: =VerticalAlign.Middle
Weight: ='TextCanvas.Weight'.Regular
Width: =200
X: =18
Y: =29
- galSidebarMenu_1:
Control: Gallery@2.15.0
Variant: Vertical
Properties:
Fill: =Color.Transparent
Height: =Min(CountRows(cmpSidebar.MenuItems) * 48, Parent.Height - 210)
Items: =cmpSidebar.MenuItems
ShowScrollbar: =false
TemplatePadding: =2
TemplateSize: =46
Width: =Parent.Width - 24
X: =12
Y: =132
Children:
- cntMenuItem:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
DropShadow: =DropShadow.None
Fill: |-
=If(
ThisItem.ID = cmpSidebar.SelectedMenuID,
RGBA(255, 255, 255, 1),
Color.Transparent
)
Height: =42
RadiusBottomLeft: =6
RadiusBottomRight: =6
RadiusTopLeft: =6
RadiusTopRight: =6
Width: =Parent.TemplateWidth
Y: =2
Children:
- imgMenuIcon:
Control: Image@2.2.3
Properties:
BorderColor: =Color.Transparent
Height: =20
Image: |-
=With(
{
_stroke:
If(
ThisItem.ID = cmpSidebar.SelectedMenuID,
"#312762",
"#ffffff"
),
_path:
Switch(
ThisItem.IconName,
"home",
"<path d='M3 11.5L12 4l9 7.5'/><path d='M5 10v10h14V10'/><path d='M9 20v-6h6v6'/>",
"forms",
"<rect x='4' y='3' width='16' height='18' rx='2'/><path d='M8 8h8'/><path d='M8 12h8'/><path d='M8 16h5'/>",
"layers",
"<path d='M12 2L2 7l10 5 10-5-10-5z'/><path d='M2 12l10 5 10-5'/><path d='M2 17l10 5 10-5'/>",
"table",
"<rect x='3' y='4' width='18' height='16' rx='2'/><path d='M3 10h18'/><path d='M9 4v16'/><path d='M15 4v16'/>",
"chart",
"<path d='M4 20V10'/><path d='M10 20V4'/><path d='M16 20v-7'/><path d='M22 20H2'/>",
"pages",
"<rect x='4' y='4' width='13' height='16' rx='2'/><path d='M8 4V2h12v16h-3'/>",
"document",
"<path d='M6 2h8l4 4v16H6z'/><path d='M14 2v5h5'/><path d='M9 13h6'/><path d='M9 17h6'/>",
"<circle cx='12' cy='12' r='9'/>"
)
},
"data:image/svg+xml;utf8," &
EncodeUrl(
"<svg xmlns='http://www.w3.org/2000/svg' " &
"viewBox='0 0 24 24' " &
"fill='none' " &
"stroke='" & _stroke & "' " &
"stroke-width='1.8' " &
"stroke-linecap='round' " &
"stroke-linejoin='round'>" &
_path &
"</svg>"
)
)
Width: =20
X: =14
Y: =11
- txtMenuTitle:
Control: Text@0.0.51
Properties:
Font: =Font.'Segoe UI'
FontColor: |-
=If(
ThisItem.ID = cmpSidebar.SelectedMenuID,
RGBA(35, 35, 35, 1),
RGBA(255, 255, 255, 1)
)
Height: =Parent.Height
Size: =10
Text: =ThisItem.Title
VerticalAlign: =VerticalAlign.Middle
Weight: ='TextCanvas.Weight'.Semibold
Width: =130
X: =46
- txtChevron:
Control: Text@0.0.51
Properties:
Align: ='TextCanvas.Align'.Center
Font: =Font.'Segoe UI'
FontColor: |-
=If(
ThisItem.ID = cmpSidebar.SelectedMenuID,
RGBA(35, 35, 35, 1),
RGBA(255, 255, 255, 1)
)
Height: =Parent.Height
Size: =16
Text: ="›"
VerticalAlign: =VerticalAlign.Middle
Visible: =ThisItem.HasChildren
Width: =24
X: =Parent.Width - 32
- btnMenuClick:
Control: Classic/Button@2.2.0
Properties:
BorderColor: =Color.Transparent
BorderStyle: =BorderStyle.None
Color: =Color.Transparent
Fill: =Color.Transparent
FocusedBorderColor: =Color.Transparent
Height: =Parent.Height
HoverBorderColor: =Color.Transparent
HoverColor: =Color.Transparent
HoverFill: =RGBA(255, 255, 255, 0.08)
OnSelect: =cmpSidebar.OnMenuSelect()
PressedBorderColor: =Color.Transparent
PressedColor: =Color.Transparent
PressedFill: =RGBA(255, 255, 255, 0.15)
RadiusBottomLeft: =6
RadiusBottomRight: =6
RadiusTopLeft: =6
RadiusTopRight: =6
Text: =""
Width: =Parent.Width
- cntFooter:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
DropShadow: =DropShadow.None
Fill: =Color.Transparent
Height: =50
RadiusBottomRight: |+
=20
Width: =Parent.Width
Y: =Parent.Height - 55
Children:
- txtFooter:
Control: Text@0.0.51
Properties:
Font: =Font.'Segoe UI'
FontColor: =RGBA(205, 200, 225, 1)
Height: =30
Size: =8
Text: ="Settings | Logout"
VerticalAlign: =VerticalAlign.Middle
Weight: ='TextCanvas.Weight'.Regular
Width: =180
X: =28
Y: =5