NavBar

Overview

Usage

  • Avoid adding a link to NavBarItems that contain MenuItems. While the link will work in vertical mode, it will not work properly when in horizontal mode.
  • When horizontal menu gets too long for screen, NavBarItems will automatically be placed into the Overflow area. You can place them into the Overflow area by default, too.
Horizontal NavBar
<Stack Style="width:100%;">
    <NavBar Header="TestHeader" Direction="LayoutDirection.Horizontal" Items=@items>
        <FooterTemplate>
            <div>A footer area.</div>
        </FooterTemplate>
    </NavBar>
</Stack>
            
            
Vertical NavBar
A footer area.
<Stack Style="width:100%;">
    <NavBar Header="TestHeader" Direction="LayoutDirection.Horizontal" Items=@items>
        <FooterTemplate>
            <div>A footer area.</div>
        </FooterTemplate>
    </NavBar>
</Stack>