Sidebar
A sidebar with menus, groups and submenus, collapsing to icons or off canvas, as uikit:Sidebar.
<Border BorderBrush="{DynamicResource UIKit.Border}" BorderThickness="1" CornerRadius="6" ClipToBounds="True"
Width="560" Height="480" HorizontalAlignment="Left">
<DockPanel>
<DockPanel.Styles>
<!-- Collapsed to icons, the header and footer keep their icons only. -->
<Style Selector="uikit|SidebarHeader:collapsed StackPanel.text, uikit|SidebarHeader:collapsed PathIcon.end, uikit|SidebarFooter:collapsed TextBlock, uikit|SidebarFooter:collapsed PathIcon.end">
<Setter Property="IsVisible" Value="False" />
</Style>
<Style Selector="uikit|SidebarHeader:collapsed Border.logo">
<Setter Property="Width" Value="16" />
<Setter Property="Height" Value="16" />
<Setter Property="Background" Value="Transparent" />
</Style>
<Style Selector="uikit|SidebarHeader:collapsed Border.logo PathIcon">
<Setter Property="Foreground" Value="{DynamicResource UIKit.Foreground}" />
</Style>
</DockPanel.Styles>
<uikit:Sidebar Name="Sidebar" DockPanel.Dock="Left" ExpandedWidth="220" uikit:SidebarMenuItem.Click="OnItemClick">
<uikit:Sidebar.Header>
<uikit:SidebarHeader>
<uikit:SidebarHeader.Flyout>
<MenuFlyout Placement="BottomEdgeAlignedLeft">
<MenuItem Header="Twitter Inc." />
<MenuItem Header="Meta Platforms" />
<MenuItem Header="Google Inc." />
</MenuFlyout>
</uikit:SidebarHeader.Flyout>
<DockPanel>
<Border Classes="logo" DockPanel.Dock="Left" Width="32" Height="32" CornerRadius="6"
Background="{DynamicResource UIKit.Success}">
<PathIcon Data="{StaticResource UIKit.Icon.GalleryVerticalEnd}"
Foreground="{DynamicResource UIKit.SuccessForeground}" />
</Border>
<PathIcon Classes="end" DockPanel.Dock="Right" Data="{StaticResource UIKit.Icon.ChevronsUpDown}" />
<StackPanel Classes="text" Margin="8,0" VerticalAlignment="Center">
<TextBlock Text="Company Name" FontSize="14" />
<TextBlock Text="Enterprise" FontSize="12" />
</StackPanel>
</DockPanel>
</uikit:SidebarHeader>
</uikit:Sidebar.Header>
<uikit:SidebarGroup Label="Platform">
<uikit:SidebarMenu>
<uikit:SidebarMenuItem Label="Playground" Icon="{StaticResource UIKit.Icon.SquareTerminal}" IsActive="True" IsOpen="True">
<uikit:SidebarMenuItem Label="History">
<uikit:SidebarMenuItem.Suffix>
<ToggleSwitch Classes="xsmall" />
</uikit:SidebarMenuItem.Suffix>
</uikit:SidebarMenuItem>
<uikit:SidebarMenuItem Label="Starred" />
</uikit:SidebarMenuItem>
<uikit:SidebarMenuItem Label="Models" Icon="{StaticResource UIKit.Icon.Bot}">
<uikit:SidebarMenuItem Label="Genesis" />
<uikit:SidebarMenuItem Label="Explorer" />
</uikit:SidebarMenuItem>
<uikit:SidebarMenuItem Label="Documentation" Icon="{StaticResource UIKit.Icon.BookOpen}">
<uikit:SidebarMenuItem.ContextMenu>
<ContextMenu>
<MenuItem Header="Open in new tab" />
</ContextMenu>
</uikit:SidebarMenuItem.ContextMenu>
</uikit:SidebarMenuItem>
</uikit:SidebarMenu>
</uikit:SidebarGroup>
<uikit:SidebarGroup Label="Projects">
<uikit:SidebarMenu>
<uikit:SidebarMenuItem Label="Design Engineering" Icon="{StaticResource UIKit.Icon.Frame}">
<uikit:SidebarMenuItem.Suffix>
<uikit:Badge IsDot="True">
<PathIcon Data="{StaticResource UIKit.Icon.Bell}" Width="14" Height="14" Margin="2" />
</uikit:Badge>
</uikit:SidebarMenuItem.Suffix>
</uikit:SidebarMenuItem>
<uikit:SidebarMenuItem Label="Sales and Marketing" Icon="{StaticResource UIKit.Icon.ChartPie}" />
<uikit:SidebarMenuItem Label="Travel" Icon="{StaticResource UIKit.Icon.Map}" IsEnabled="False" />
</uikit:SidebarMenu>
</uikit:SidebarGroup>
<uikit:Sidebar.Footer>
<uikit:SidebarFooter>
<DockPanel>
<PathIcon Classes="end" DockPanel.Dock="Right" Data="{StaticResource UIKit.Icon.ChevronsUpDown}" />
<StackPanel Orientation="Horizontal" Spacing="8">
<PathIcon Data="{StaticResource UIKit.Icon.CircleUser}" />
<TextBlock Text="Jason Lee" VerticalAlignment="Center" />
</StackPanel>
</DockPanel>
</uikit:SidebarFooter>
</uikit:Sidebar.Footer>
</uikit:Sidebar>
<StackPanel Margin="16" Spacing="12">
<StackPanel Orientation="Horizontal" Spacing="12">
<uikit:SidebarToggleButton IsCollapsed="{Binding #Sidebar.IsCollapsed}" />
<TextBlock Name="Current" Text="Playground" FontWeight="SemiBold" VerticalAlignment="Center" />
</StackPanel>
<TextBlock Text="A quick view of your workspace activity." TextWrapping="Wrap"
Foreground="{DynamicResource UIKit.MutedForeground}" />
</StackPanel>
</DockPanel>
</Border>Usage
uikit:Sidebar is the surface of the Sidebar with its own content: a Header, items that scroll, and a Footer, ExpandedWidth wide (255 by default) on its Side. IsCollapsed collapses it as Collapsible says: Icon to 48px, showing only icons; Offcanvas out of the layout, sliding away from the content; None never. The width moves over 200ms while the content snaps to its new layout. Its items are usually uikit:SidebarGroups (a muted label over the items) holding uikit:SidebarMenus of uikit:SidebarMenuItems:
| Item property | Meaning |
|---|---|
Label, Icon | The row's text and its 14px icon. Collapsed to icons, the row is the icon alone and the label shows as a tooltip on its right. |
Suffix | Content at the end of the row: a uikit:Badge, a ToggleSwitch, an icon. |
IsActive | The current item, in the sidebar accent with medium text. |
Nested items, IsOpen | A submenu under a line, opened and closed by the caret at the row's end; set IsOpen to start open. |
ClickToOpen, ClickToToggle | A click on the row also opens, or opens and closes, the submenu. |
Click, Command | Raised and run when the row is clicked; a disabled item (IsEnabled="False") is muted and takes no click. |
ContextMenu | Opens on a right click. |
uikit:SidebarHeader and uikit:SidebarFooter are rows that take the sidebar accent when hovered or IsSelected; they are buttons, so a Flyout is their menu. uikit:SidebarToggleButton flips the IsCollapsed it is bound to and shows the matching panel icon. Inside a collapsed sidebar the header, footer, groups and items have the :collapsed pseudo-class, which styles can use for content of their own. Set as a SplitView's Pane, uikit:Sidebar follows the pane instead: the SplitView draws the surface, and the sidebar is collapsed while the pane is closed, to icons in the compact display modes.
The demo has a header and its company menu, two groups, a submenu with a switch, a badge, a disabled item, a footer and a toggle button; a click makes an item the active one.
Examples
uikit:Sidebar as a SplitView's pane in CompactInline: closing the pane collapses the menu to its icons.
<SplitView DisplayMode="CompactInline" OpenPaneLength="200" IsPaneOpen="{Binding #PaneToggle.IsChecked}"
Width="480" Height="220" HorizontalAlignment="Left">
<SplitView.Pane>
<uikit:Sidebar>
<uikit:SidebarMenu>
<uikit:SidebarMenuItem Label="Inbox" Icon="{StaticResource UIKit.Icon.Inbox}" IsActive="True" />
<uikit:SidebarMenuItem Label="Starred" Icon="{StaticResource UIKit.Icon.Star}" />
<uikit:SidebarMenuItem Label="Projects" Icon="{StaticResource UIKit.Icon.Folder}" />
</uikit:SidebarMenu>
</uikit:Sidebar>
</SplitView.Pane>
<Border Background="{DynamicResource UIKit.Muted}">
<ToggleButton Name="PaneToggle" Classes="outline" IsChecked="True" Margin="8"
HorizontalAlignment="Left" VerticalAlignment="Top">
<PathIcon Data="{StaticResource UIKit.Icon.PanelLeftClose}" />
</ToggleButton>
</Border>
</SplitView>