Setting the file. One moment.
Subchapter 169.2
references/LAYOUT-AND-NAVIGATION.mdMarkdown5 KBView on GitHub
Root layout container. Use as the outermost structural component.
<FluentLayout Orientation="Orientation.Vertical">
<FluentHeader>...</FluentHeader>
<FluentBodyContent>...</FluentBodyContent>
<FluentFooter>...</FluentFooter>
</FluentLayout>Sticky header and footer sections within FluentLayout.
<FluentHeader Height="50">
<FluentStack Orientation="Orientation.Horizontal" HorizontalAlignment="HorizontalAlignment.SpaceBetween">
<span>App Title</span>
<FluentButton>Settings</FluentButton>
</FluentStack>
</FluentHeader>Main scrollable content area within FluentLayout.
Flexbox container for horizontal or vertical layouts.
<FluentStack Orientation="Orientation.Horizontal"
HorizontalGap="10"
VerticalGap="10"
HorizontalAlignment="HorizontalAlignment.Center"
VerticalAlignment="VerticalAlignment.Center"
Wrap="true"
Width="100%">
<FluentButton>One</FluentButton>
<FluentButton>Two</FluentButton>
</FluentStack>Parameters: Orientation, HorizontalGap, VerticalGap, HorizontalAlignment, VerticalAlignment, Wrap, Width.
12-column responsive grid system.
<FluentGrid Spacing="3" Justify="JustifyContent.Center" AdaptiveRendering="true">
<FluentGridItem xs="12" sm="6" md="4" lg="3">
Card 1
</FluentGridItem>
<FluentGridItem xs="12" sm="6" md="4" lg="3">
Card 2
</FluentGridItem>
</FluentGrid>Size parameters (xs, sm, md, lg, xl, xxl) represent column spans out of 12. Use AdaptiveRendering="true" to hide items that don’t fit.
Pre-composed layout with header, nav menu, and body area.
<FluentMainLayout Header="@header"
SubHeader="@subheader"
NavMenuContent="@navMenu"
Body="@body"
HeaderHeight="50"
NavMenuWidth="250"
NavMenuTitle="Navigation" />Collapsible navigation menu with keyboard support.
<FluentNavMenu Width="250"
Collapsible="true"
@bind-Expanded="@menuExpanded"
Title="Main navigation"
CollapsedChildNavigation="true"
Margin="4px 0">
<FluentNavLink Href="/" Icon="@(Icons.Regular.Size20.Home)" Match="NavLinkMatch.All">
Home
</FluentNavLink>
<FluentNavLink Href="/counter" Icon="@(Icons.Regular.Size20.NumberSymbol)">
Counter
</FluentNavLink>
<FluentNavGroup Title="Admin" Icon="@(Icons.Regular.Size20.Shield)" @bind-Expanded="@adminExpanded">
<FluentNavLink Href="/admin/users">Users</FluentNavLink>
<FluentNavLink Href="/admin/roles">Roles</FluentNavLink>
</FluentNavGroup>
</FluentNavMenu>Key parameters:
Width — width in pixels (40px when collapsed)Collapsible — enables expand/collapse toggleExpanded / ExpandedChanged — bindable collapse stateCollapsedChildNavigation — shows flyout menus for groups when collapsedCustomToggle — for mobile hamburger button patternsTitle — aria-label for accessibilityExpandable group within a nav menu.
<FluentNavGroup Title="Settings"
Icon="@(Icons.Regular.Size20.Settings)"
@bind-Expanded="@settingsExpanded"
Gap="2">
<FluentNavLink Href="/settings/general">General</FluentNavLink>
<FluentNavLink Href="/settings/profile">Profile</FluentNavLink>
</FluentNavGroup>Parameters: Title, Expanded/ExpandedChanged, Icon, IconColor, HideExpander, Gap, MaxHeight, TitleTemplate.
Navigation link with active state tracking.
<FluentNavLink Href="/page"
Icon="@(Icons.Regular.Size20.Document)"
Match="NavLinkMatch.Prefix"
Target="_blank"
Disabled="false">
Page Title
</FluentNavLink>Parameters: Href, Target, Match (NavLinkMatch.Prefix default, or All), ActiveClass, Icon, IconColor, Disabled, Tooltip.
All nav components inherit from FluentNavBase which provides: Icon, IconColor, CustomColor, Disabled, Tooltip.
<FluentBreadcrumb>
<FluentBreadcrumbItem Href="/">Home</FluentBreadcrumbItem>
<FluentBreadcrumbItem Href="/products">Products</FluentBreadcrumbItem>
<FluentBreadcrumbItem>Current Page</FluentBreadcrumbItem>
</FluentBreadcrumb><FluentTabs @bind-ActiveTabId="@activeTab">
<FluentTab Id="tab1" Label="Details">
Details content
</FluentTab>
<FluentTab Id="tab2" Label="History">
History content
</FluentTab>
</FluentTabs>