Skip to main content
Navigation components help users move through your application’s structure.

​
DaisyBreadcrumbs

Navigation path display with separators.

​
Basic Usage

<daisy:DaisyBreadcrumbs>
  <daisy:DaisyBreadcrumbItem Content="Home" NavigateUri="/" />
  <daisy:DaisyBreadcrumbItem Content="Products" NavigateUri="/products" />
  <daisy:DaisyBreadcrumbItem Content="Details" IsCurrentPage="True" />
</daisy:DaisyBreadcrumbs>

​
With Custom Separator

<daisy:DaisyBreadcrumbs Separator="›">
  <daisy:DaisyBreadcrumbItem Content="Home" />
  <daisy:DaisyBreadcrumbItem Content="Docs" />
  <daisy:DaisyBreadcrumbItem Content="Components" />
</daisy:DaisyBreadcrumbs>

​
DaisyDock

Bottom navigation bar with macOS-style dock appearance.

​
Basic Usage

<daisy:DaisyDock ItemSelected="OnDockItemSelected">
  <daisy:DaisyDockItem Icon="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" 
                       Label="Home" 
                       Tag="home" />
  <daisy:DaisyDockItem Icon="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" 
                       Label="Search" 
                       Tag="search" />
  <daisy:DaisyDockItem Icon="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" 
                       Label="Profile" 
                       Tag="profile" />
</daisy:DaisyDock>

​
Event Handling

private void OnDockItemSelected(object sender, DaisyDockItemEventArgs e)
{
  var tag = e.Item.Tag?.ToString();
  // Navigate based on tag
}

​
DaisyMenu

Vertical or horizontal list of links and actions.

​
Basic Usage

<daisy:DaisyMenu>
  <daisy:DaisyMenuItem Content="Dashboard" Icon="..." Click="OnDashboard" />
  <daisy:DaisyMenuItem Content="Settings" Icon="..." Click="OnSettings" />
  <daisy:DaisyMenuSeparator />
  <daisy:DaisyMenuItem Content="Logout" Icon="..." Click="OnLogout" />
</daisy:DaisyMenu>

​
Horizontal Menu

<daisy:DaisyMenu Orientation="Horizontal">
  <daisy:DaisyMenuItem Content="Home" />
  <daisy:DaisyMenuItem Content="About" />
  <daisy:DaisyMenuItem Content="Contact" />
</daisy:DaisyMenu>

​
With Submenu

<daisy:DaisyMenu>
  <daisy:DaisyMenuItem Content="File">
    <daisy:DaisyMenuItem.Submenu>
      <daisy:DaisyMenuItem Content="New" />
      <daisy:DaisyMenuItem Content="Open" />
      <daisy:DaisyMenuItem Content="Save" />
    </daisy:DaisyMenuItem.Submenu>
  </daisy:DaisyMenuItem>
  <daisy:DaisyMenuItem Content="Edit" />
</daisy:DaisyMenu>

​
DaisyNavbar

Top navigation bar container.

​
Basic Usage

<daisy:DaisyNavbar>
  <daisy:DaisyNavbar.Start>
    <daisy:DaisyButton Content="☰" Variant="Ghost" />
    <TextBlock Text="MyApp" FontSize="20" FontWeight="Bold" 
               VerticalAlignment="Center" Margin="12,0,0,0" />
  </daisy:DaisyNavbar.Start>
  
  <daisy:DaisyNavbar.Center>
    <daisy:DaisyMenu Orientation="Horizontal">
      <daisy:DaisyMenuItem Content="Home" />
      <daisy:DaisyMenuItem Content="About" />
      <daisy:DaisyMenuItem Content="Contact" />
    </daisy:DaisyMenu>
  </daisy:DaisyNavbar.Center>
  
  <daisy:DaisyNavbar.End>
    <daisy:DaisyButton Content="Login" Variant="Primary" />
  </daisy:DaisyNavbar.End>
</daisy:DaisyNavbar>

<daisy:DaisyNavbar>
  <daisy:DaisyNavbar.Start>
    <TextBlock Text="MyApp" FontSize="20" FontWeight="Bold" />
  </daisy:DaisyNavbar.Start>
  
  <daisy:DaisyNavbar.Center>
    <daisy:DaisyInput PlaceholderText="Search..." 
                      Variant="Bordered" 
                      Width="300" />
  </daisy:DaisyNavbar.Center>
  
  <daisy:DaisyNavbar.End>
    <daisy:DaisyAvatar ImageSource="/Assets/user.png" Size="Small" />
  </daisy:DaisyNavbar.End>
</daisy:DaisyNavbar>

​
DaisyPagination

Page navigation buttons.

​
Basic Usage

<daisy:DaisyPagination CurrentPage="{x:Bind CurrentPage, Mode=TwoWay}" 
                       TotalPages="10" 
                       PageChanged="OnPageChanged" />

​
Event Handling

private void OnPageChanged(object sender, PageChangedEventArgs e)
{
  int newPage = e.NewPage;
  // Load data for new page
}

​
Properties

PropertyTypeDefaultDescription
CurrentPageint1Currently selected page
TotalPagesint1Total number of pages
MaxVisiblePagesint7Max page buttons to show
VariantDaisyPaginationVariantDefaultStyle variant

​
DaisySteps

Progress step indicator.

​
Basic Usage

<daisy:DaisySteps CurrentStep="1">
  <daisy:DaisyStep Title="Register" />
  <daisy:DaisyStep Title="Choose Plan" />
  <daisy:DaisyStep Title="Purchase" />
  <daisy:DaisyStep Title="Receive" />
</daisy:DaisySteps>

​
Vertical Steps

<daisy:DaisySteps CurrentStep="2" Orientation="Vertical">
  <daisy:DaisyStep Title="Create Account" 
                   Description="Fill in your details" />
  <daisy:DaisyStep Title="Verify Email" 
                   Description="Check your inbox" />
  <daisy:DaisyStep Title="Complete Profile" 
                   Description="Add profile information" />
</daisy:DaisySteps>

​
With Variants

<daisy:DaisySteps CurrentStep="1" Variant="Primary">
  <daisy:DaisyStep Title="Step 1" />
  <daisy:DaisyStep Title="Step 2" />
  <daisy:DaisyStep Title="Step 3" />
</daisy:DaisySteps>

​
DaisyTabs

Tabbed navigation with multiple styles.

​
Basic Usage

<daisy:DaisyTabs SelectedIndex="0">
  <daisy:DaisyTab Title="Tab 1">
    <TextBlock Text="Content for Tab 1" />
  </daisy:DaisyTab>
  <daisy:DaisyTab Title="Tab 2">
    <TextBlock Text="Content for Tab 2" />
  </daisy:DaisyTab>
  <daisy:DaisyTab Title="Tab 3">
    <TextBlock Text="Content for Tab 3" />
  </daisy:DaisyTab>
</daisy:DaisyTabs>

​
Tab Styles

<daisy:DaisyTabs Variant="Bordered">
  <daisy:DaisyTab Title="Home" />
  <daisy:DaisyTab Title="About" />
</daisy:DaisyTabs>

​
Properties

PropertyTypeDefaultDescription
SelectedIndexint0Currently selected tab index
VariantDaisyTabsVariantDefaultTab style (Bordered, Lifted, Boxed)
SizeDaisySizeMediumTab size

​
App Shell with Navbar and Drawer

<Grid RowDefinitions="Auto,*">
  <daisy:DaisyNavbar>
    <daisy:DaisyNavbar.Start>
      <daisy:DaisyButton Content="☰" 
                         Click="{x:Bind () => AppDrawer.IsOpen = true}" 
                         Variant="Ghost" />
      <TextBlock Text="MyApp" FontSize="20" FontWeight="Bold" Margin="12,0,0,0" />
    </daisy:DaisyNavbar.Start>
    
    <daisy:DaisyNavbar.End>
      <daisy:DaisyThemeDropdown MinWidth="150" />
    </daisy:DaisyNavbar.End>
  </daisy:DaisyNavbar>
  
  <daisy:DaisyDrawer x:Name="AppDrawer" Grid.Row="1">
    <daisy:DaisyDrawer.DrawerContent>
      <daisy:DaisyMenu>
        <daisy:DaisyMenuItem Content="Dashboard" />
        <daisy:DaisyMenuItem Content="Settings" />
      </daisy:DaisyMenu>
    </daisy:DaisyDrawer.DrawerContent>
    
    <daisy:DaisyDrawer.MainContent>
      <Frame x:Name="ContentFrame" />
    </daisy:DaisyDrawer.MainContent>
  </daisy:DaisyDrawer>
</Grid>

​
Next Steps

Feedback

Learn about feedback components

Actions

Explore action controls

Build docs developers (and LLMs) love

Get started for freeTalk to us