AppSidebar

A sidebar that becomes a drawer or panel on small screens.

IzzyBlazor.AppSidebar in the IzzyBlazor.Core package, generated from the 0.1.0-alpha.17 assembly and its doc comments.

Properties (19)

PositionSidebarPosition = SidebarPosition.Start

Which side it's on. SidebarPosition.Start (the default) is the left in left-to-right languages; the drawer slides in from the same side.

DrawerPositionSidebarPosition? (computed)

Below Breakpoint, the side the drawer slides in from, and the side of the header its menu button moves to. Defaults to Position. Set SidebarPosition.End to keep a sidebar on the left on wide screens but open it from the right on phones, with the menu button on the right, where content sites put it.

SmallScreenSidebarSmallScreen = SidebarSmallScreen.Drawer

How it opens below Breakpoint: SidebarSmallScreen.Drawer (the default) slides in from the side over the page, for long navigation such as docs or an app; SidebarSmallScreen.Panel opens under the header, full width, with the header still in view and SidebarToggle turned into its close button, as SiteNav does. Both work with JavaScript off.

FullHeightbool = false

Runs the full height of the window, with the header and footer beside it instead of above and below.

WidthLength = 16rem

The width. Defaults to 16rem.

BreakpointBreakpoint = Breakpoint.Md

Below this width it becomes a drawer. Defaults to Breakpoint.Md.

Labelstring? = "Main"

The navigation landmark's name for screen readers. Defaults to "Main".

Idstring = "ib-sidebar"

The element id, which SidebarToggle links to. Defaults to ib-sidebar.

Collapsiblebool = false

Lets people shrink it to an icon rail on wide screens, with a chevron at its top and SidebarToggle. Works with JavaScript off; below the breakpoint it is the usual drawer.

@bind-Collapsedbool = false @bind: Interactive only

Whether it is collapsed. The starting value when nothing is remembered; with @bind-Collapsed on an interactive page, C# follows it and can set it.

CollapsedWidthLength = 3.5rem

The width when collapsed. Defaults to 3.5rem, room for an icon.

RememberStatebool = true

Remembers the choice in a cookie (written by the script, read by the server), so it survives reloads and navigation. Defaults to true. The remembered value wins over Collapsed when the page loads.

CollapseButtonbool?

The chevron at the top of the sidebar. By default (null) it shows only when the shell has no SidebarToggle, which collapses the sidebar on wide screens itself. true always shows it; false never does.

CollapseButtonPositionVerticalPosition = VerticalPosition.Bottom

Where the chevron goes: VerticalPosition.Bottom (the default, in the footer row) or VerticalPosition.Top.

CloseLabelstring? = "Close menu"

The drawer's close button name. Defaults to "Close menu".

CollapseLabelstring? = "Collapse sidebar"

The collapse control's accessible name. Defaults to "Collapse sidebar".

BgColor? = Color.Surface

The background, such as Color.Fill. Text switches to the color's on- partner when it has one. Defaults to Color.Surface.

ColorSchemeColorScheme = ColorScheme.Auto

The color scheme of this part: ColorScheme.Dark for a dark sidebar or header in a light app, ColorScheme.Inverse for the opposite of the page. Everything inside, including its menus, follows it. Defaults to the page's scheme.

ChildContentRenderFragment?

The content.

Common props (from IzzyComponentBase)

Classstring?

Extra CSS classes, merged after the component's own classes.

Stylestring?

Inline style, appended after the component's generated custom properties.

HiddenFromBreakpoint?

Hides the component from this breakpoint up, such as a menu button only phones need.

VisibleFromBreakpoint?

Shows the component only from this breakpoint up, such as header links for wide screens.

Events (0)

No events.

Parts (4)

Components written inside AppSidebar, documented here with it.

`SidebarHeader`

Pinned to the top of an AppSidebar, above the scrolling content: a brand or workspace switcher. In the drawer it shares the top bar with the close button. In the icon rail an AppBrand's name hides by itself; mark other text with class="ib-collapsed-hide". Write it directly in the sidebar.

ChildContentRenderFragment?

The part's content.

`SidebarBody`

An AppSidebar's scrolling content with layout props: a column with Gap, Align and Justify, like Stack. Optional: content written straight in the sidebar is its body too.

GapResponsive<int>Responsive

Space between children, in spacing steps (0 to 16).

AlignResponsive<Align> (computed)Responsive

Cross-axis alignment. Defaults to stretch.

JustifyResponsive<Justify> (computed)Responsive

Main-axis distribution. Defaults to start.

Wrapbool = false

Whether children wrap onto new lines: <Row Wrap>.

Inlinebool = false

Renders as inline-flex so the container sits in a line of text.

Asstring = "div"From Box

The element to render: div on a Box; components built on it set their own (List a ul, Section a section).

ChildContentRenderFragment?From Box

The content.

Plus 25 surface props, 16 item props and 4 common props.

`SidebarFooter`

Pinned to the bottom of an AppSidebar, below the scrolling content: an account menu or settings. Write it directly in the sidebar.

ChildContentRenderFragment?

The part's content.

`SidebarToggle`

The menu button that opens an AppShell's sidebar below its breakpoint. Hidden above it. It is a link to the sidebar's id, so it works with no JavaScript; with JavaScript the shell opens the drawer without changing the URL, and makes it a button (role, Space, aria-expanded kept in step). With no JavaScript it stays a link: it couldn't keep aria-expanded true.

When the sidebar is Collapsible, a second button takes its place above the breakpoint: a label for the sidebar's collapse checkbox, so it works with no JavaScript too. The checkbox itself is the control screen readers and keyboards use; this label is a mouse shortcut.

Labelstring? = "Open menu"

The accessible name. Defaults to "Open menu".

Forstring = "ib-sidebar"

The sidebar to open. Defaults to ib-sidebar, AppShell's default.

VariantButtonVariant = ButtonVariant.Ghost

Visual weight. Defaults to ghost.

CloseLabelstring? = "Close menu"

The name of the button that takes the menu button's place while a SidebarSmallScreen.Panel sidebar is open. Defaults to "Close menu".

CollapseLabelstring? = "Collapse sidebar"

The tooltip on the wide-screen collapse button. Defaults to "Collapse sidebar".

Plus 16 item props and 4 common props.

Types (10)

`Align`

enum

Cross-axis alignment of a Stack's children.

Align values
Value	Description
`Stretch`	Children stretch to fill the cross axis.
`Start`	Aligned to the start.
`Center`	Centered.
`End`	Aligned to the end.
`Baseline`	Aligned on their text baselines.

`Breakpoint`

enum

The responsive breakpoints. Mobile first: a value at a breakpoint applies from that width upward.

Breakpoint values
Value	Description
`Sm`	640px and wider.
`Md`	768px and wider.
`Lg`	1024px and wider.
`Xl`	1280px and wider.

`ButtonVariant`

enum

A button's visual weight, from strongest to quietest.

ButtonVariant values
Value	Description
`Solid`	Filled with the accent color. For the main action.
`Soft`	A light tint of the accent color.
`Outline`	An accent-colored border on a transparent background.
`Ghost`	Transparent until hovered. For toolbars and dense layouts.
`Link`	Looks like a link.

`Color`

struct

A color: one of the theme's tokens (so it follows light and dark mode), a custom token from your own theme, or a raw CSS color.

Color members
Member	Description
`Primary`	Brand color.
`OnPrimary`	Text and icons on `Primary`.
`Success`	Success.
`OnSuccess`	Text and icons on `Success`.
`Warning`	Warning.
`OnWarning`	Text and icons on `Warning`.
`Danger`	Danger.
`OnDanger`	Text and icons on `Danger`.
`Info`	Informational.
`OnInfo`	Text and icons on `Info`.
`Neutral`	Neutral accent.
`OnNeutral`	Text and icons on `Neutral`.
`Background`	The page, behind the surfaces: a near-white in the default theme.
`Surface`	Cards, tables, fields and bars: white in light mode.
`FillSubtle`	The quietest fill inside a surface, for large areas: a filled card, a panel, a band.
`Fill`	A fill inside a surface that must show at small sizes: table heads, code, wells.
`FillStrong`	The strongest fill: selected and pressed states, chips, tracks, skeletons.
`SurfaceOverlay`	Overlays that float above the page: menus, popovers, dialogs, toasts. White like `Surface` in light mode, where a shadow sets it apart; a step lighter in dark mode.
`OnSurface`	Text on any surface.
`Muted`	Secondary text on any surface: descriptions, metadata.
`Subtle`	Tertiary text: captions, hints, placeholders. Still at least 4.5:1 on Surface and Fill.
`Disabled`	Text of disabled controls. Deliberately low contrast.
`PrimaryText`	`Primary` tuned for text and links on surfaces (at least 4.5:1).
`SuccessText`	`Success` tuned for text on surfaces (at least 4.5:1).
`WarningText`	`Warning` tuned for text on surfaces (at least 4.5:1).
`DangerText`	`Danger` tuned for text on surfaces (at least 4.5:1).
`InfoText`	`Info` tuned for text on surfaces (at least 4.5:1).
`PrimarySoft`	The accent's soft tint: soft buttons, the current page, chips. Text on it: `PrimaryText`.
`SuccessSoft`	`Success`'s soft tint, behind a success message. Text on it: `SuccessText`.
`WarningSoft`	`Warning`'s soft tint. Text on it: `WarningText`.
`DangerSoft`	`Danger`'s soft tint. Text on it: `DangerText`.
`InfoSoft`	`Info`'s soft tint. Text on it: `InfoText`.
`Focus`	The focus ring and field halo color: `--ib-color-focus`, the primary color unless the theme sets it.
`Border`	Borders and dividers. Decorative: too light to be the only edge of a control.
`Outline`	The edge of a control, such as an input or switch track: about 2:1 against `Surface`, darker than `Border` so an empty field reads as a box.
`Transparent`	Fully transparent.
`CurrentColor`	The current text color.
`Token(string name)`	A theme token by name, rendered as `var(--ib-color-{name})`. Use it for tokens your own theme adds.
`Of(string css)`	A raw CSS color such as `#ff6600` or `oklch(70% 0.1 250)`. Checked for unsafe characters.
`Css string`	The CSS value this color renders as.
`TokenName string?`	The theme token name, such as `primary`, or `null` for a raw color.
`ContrastText Color?`	The text color that pairs with this color used as a background: `OnPrimary` for `Primary`, `OnSurface` for the surfaces, `on-{name}` for a custom token (which falls back to the inherited color when the theme does not define it). `null` for raw colors and for colors that are already text colors.

`ColorScheme`

enum

Light, dark, or automatic. For the app (ColorScheme, the user's pick in a ColorSchemeSwitch), ColorScheme.Auto follows the device. For part of a page (ColorScheme on Box and the App layout parts), ColorScheme.Auto follows the page, and ColorScheme.Inverse is the opposite of it. Every color token switches with the scheme, so links, buttons, badges, fields and focus rings inside keep their contrast.

ColorScheme values
Value	Description
`Auto`	Follow the device for the app, or the page for part of it (the default).
`Light`	Always light.
`Dark`	Always dark, such as a dark sidebar in a light app.
`Inverse`	For part of a page: the opposite of the page, dark on a light page and light on a dark one.

`Justify`

enum

Main-axis distribution of a Stack's children.

Justify values
Value	Description
`Start`	Packed at the start.
`Center`	Packed in the center.
`End`	Packed at the end.
`Between`	First and last at the edges, equal space between.
`Around`	Equal space around each child.
`Evenly`	Equal space between and at the edges.

`Length`

struct

A width, height or flex basis: a size token, a keyword, or a CSS length built with a factory such as Rem.

Length members
Member	Description
`Sm`	640px (matches the `sm` breakpoint).
`Md`	768px (matches the `md` breakpoint).
`Lg`	1024px (matches the `lg` breakpoint).
`Xl`	1280px (matches the `xl` breakpoint).
`Prose`	A comfortable reading width, 68 characters.
`Full`	100% of the containing block.
`Auto`	`auto`.
`FitContent`	`fit-content`: as wide as the content, up to the available space.
`MinContent`	`min-content`.
`MaxContent`	`max-content`.
`Px(double value)`	Pixels.
`Rem(double value)`	Root ems (16px each by default).
`Percent(double value)`	Percent of the containing block.
`Ch(double value)`	Character widths, for text measures.
`Vw(double value)`	Percent of the viewport width.
`Dvh(double value)`	Percent of the dynamic viewport height (accounts for mobile browser bars).
`Of(string css)`	Any CSS length, such as `calc(100% - 2rem)`. Checked for unsafe characters.
`Css string`	The CSS value this length renders as.

`SidebarPosition`

enum

Which side of the page a sidebar sits on, following the reading direction.

SidebarPosition values
Value	Description
`Start`	The start side: left in left-to-right languages, right in right-to-left ones.
`End`	The end side: right in left-to-right languages, left in right-to-left ones.

`SidebarSmallScreen`

enum

How an AppSidebar opens below its breakpoint.

SidebarSmallScreen values
Value	Description
`Drawer`	A drawer that slides in from the side over the page (the default), full width on phones.
`Panel`	A panel under the header, full width and as tall as its content: the header stays in view and the menu button turns into the close button, as SiteNav's menu does.

`VerticalPosition`

enum

Top or bottom, such as where AppSidebar's collapse button sits.

VerticalPosition values
Value	Description
`Top`	At the top.
`Bottom`	At the bottom.