Dock: Blazor dock component

Examples

Active marks the selected DockItem; track it in your own state and set it from OnClick.

Current tab: Home

website/Examples/Navigation/DockBasicExample.razor Source

Size maps to dock-xs through dock-xl; leave it null for daisyUI's default height.

website/Examples/Navigation/DockSizesExample.razor Source

Href turns an item into a link; without a visible Label, AriaLabel names it for screen readers.

website/Examples/Navigation/DockIconOnlyExample.razor Source

DaisyBlazor

Fixed bool
= true
When true (default) the dock is fixed to the viewport bottom; false places it inline (position: relative).
Size DockSize?
= null
Controls the dock height via daisyUI size modifiers (dock-xs … dock-xl). Null means no modifier (default daisyUI size).
Class string
= null
Extra CSS classes merged onto the .dock element.
Style string
= null
Inline CSS style applied to the .dock element.

Name	Type	Default	Description
Fixed	bool	true	When true (default) the dock is fixed to the viewport bottom; false places it inline (position: relative).
Size	DockSize?	null	Controls the dock height via daisyUI size modifiers (dock-xs … dock-xl). Null means no modifier (default daisyUI size).
Class	string	null	Extra CSS classes merged onto the .dock element.
Style	string	null	Inline CSS style applied to the .dock element.

ChildContent RenderFragment
Items to render inside the dock (use DockItem components).

Name	Type	Description
ChildContent	RenderFragment	Items to render inside the dock (use DockItem components).

DaisyBlazor

Active bool
= false
Marks this item as the currently active/selected dock entry (dock-active; aria-current="page" on links, "true" on buttons).
AriaLabel string
= null
Accessible name for an icon-only item. Used when no visible Label is set (a visible label already names the control). When both are empty no aria-label is emitted.
Href string
= null
When set the item renders as an <a> element pointing to this URL; otherwise a <button> is rendered.
Icon string
= null
Material Symbol ligature name (e.g. Icons.Material.Filled.Home). When set, renders an Icon child.
Label string
= null
Optional text label rendered below the icon via the daisyUI .dock-label class.
Class string
= null
Extra CSS classes merged onto the root <a> or <button> element.
Style string
= null
Inline CSS styles applied to the root <a> or <button> element.

Name	Type	Default	Description
Active	bool	false	Marks this item as the currently active/selected dock entry (dock-active; aria-current="page" on links, "true" on buttons).
AriaLabel	string	null	Accessible name for an icon-only item. Used when no visible Label is set (a visible label already names the control). When both are empty no aria-label is emitted.
Href	string	null	When set the item renders as an <a> element pointing to this URL; otherwise a <button> is rendered.
Icon	string	null	Material Symbol ligature name (e.g. Icons.Material.Filled.Home). When set, renders an Icon child.
Label	string	null	Optional text label rendered below the icon via the daisyUI .dock-label class.
Class	string	null	Extra CSS classes merged onto the root <a> or <button> element.
Style	string	null	Inline CSS styles applied to the root <a> or <button> element.

OnClick EventCallback
Click handler used when the item is rendered as a <button> (ignored when Href is set).

Name	Type	Description
OnClick	EventCallback	Click handler used when the item is rendered as a <button> (ignored when Href is set).