Edit on Github

NavBar

in namespace DotVVM.Bootstrap5.Controls

Renders a Bootstrap NavBar widget.

Usage & Scenarios

Renders responsive and customizable Bootstrap navigation widget.

https://getbootstrap.com/docs/5.2/components/navbar/

Sample 1: Basic Usage

The NavBar control can contain any number of child controls.

The following controls are supported inside NavBar:

<bs:NavBar>
    <bs:NavBarText>
       Simple text!
    </bs:NavBarText>
    <bs:NavBarSection>
        <bs:NavBarLink Click="{staticCommand: null}">
            Link item
        </bs:NavBarLink>
        <bs:NavBarDropDown HeaderText="DropDownMenu">
            <bs:DropDownItem>
                item
            </bs:DropDownItem>
            <bs:DropDownItem Enabled="false">
                item
            </bs:DropDownItem>
        </bs:NavBarDropDown>
    </bs:NavBarSection>
</bs:NavBar>

Sample 2: NavBar Brand options

You can customize the navigation with your brand using properties with Brand prefix

<h3>Brand BrandImageUrl and BrandLinkUrl</h3>
<bs:NavBar BrandImageUrl="https://via.placeholder.com/50?text=Brand" BrandLinkUrl="https://www.dotvvm.com" backgroundColor="Primary">
    <bs:NavBarSection>
        <bs:NavBarLink Click="{staticCommand: null}">
            item
        </bs:NavBarLink>
        <bs:NavBarDropDown HeaderText="DropDownMenu">
            <bs:DropDownItem>
                item
            </bs:DropDownItem>
        </bs:NavBarDropDown>
    </bs:NavBarSection>
</bs:NavBar>

<h3>Brand Placement HiddenWhenCollapsed</h3>
<bs:NavBar BrandPlacement="HiddenWhenCollapsed" backgroundColor="Danger">
    <BrandTemplate>
        Brand Placement HiddenWhenCollapsed
    </BrandTemplate>
    <bs:NavBarSection>
        <bs:NavBarLink Click="{staticCommand: null}">
            item
        </bs:NavBarLink>
        <bs:NavBarDropDown HeaderText="DropDownMenu">
            <bs:DropDownItem>
                item
            </bs:DropDownItem>
        </bs:NavBarDropDown>
    </bs:NavBarSection>
</bs:NavBar>

<h3>BrandTemplate</h3>
<bs:NavBar backgroundColor="Warning">
    <BrandTemplate>
       <bs:Icon Type="Activity" />
        You can put here anything!
    </BrandTemplate>
    <bs:NavBarSection>
        <bs:NavBarLink Click="{staticCommand: null}">
            item
        </bs:NavBarLink>
        <bs:NavBarDropDown HeaderText="DropDownMenu">
            <bs:DropDownItem>
                item
            </bs:DropDownItem>
        </bs:NavBarDropDown>
    </bs:NavBarSection>
</bs:NavBar>

Sample 3: Generated Navigation Items

The NavBar control cannot directly generate the items from a collection in the viewmodel but can use a NavBarSection control as showed in sample bellow.

<bs:NavBar >
    <BrandTemplate>
        Brand Name
    </BrandTemplate>
    <bs:NavBarSection DataSource="{value: LinksDataSet}"
                      ItemIsSelected="{value: IsSelected}"
                      ItemText="{value: Text}"
                      ItemNavigateUrl="{value: NavigateUrl}" />
    <bs:NavBarText>
        text
    </bs:NavBarText>
</bs:NavBar>
public class ViewModel
{
    public List<NavigationItem> LinksDataSet { get; set; }

    private static IQueryable<NavigationItem> GetData()
    {
        return new[]
        {
            new NavigationItem() { IsEnabled = true, IsSelected = false, NavigateUrl = "https://www.google.com/", Text = "Google" },
            new NavigationItem() { IsEnabled = true, IsSelected = false, NavigateUrl = "http://www.w3schools.com/html/", Text = "W3Schools" },
            new NavigationItem() { IsEnabled = true, IsSelected = true, NavigateUrl = "https://www.microsoft.com/en-us/", Text = "Microsoft" },
            new NavigationItem() { IsEnabled = false, IsSelected = false, NavigateUrl = "https://github.com/riganti/dotvvm", Text = "DotVVM Github" }
        }.AsQueryable();
    }

    public ViewModel()
    {
        LinksDataSet = new List<NavigationItem>();
        foreach (NavigationItem l in GetData())
        {
            LinksDataSet.Add(l);
        }
    }

}


public class NavigationItem
{
    public string Text { get; set; }
    public string NavigateUrl { get; set; }
    public bool IsSelected { get; set; }
    public bool IsEnabled { get; set; }
}

Sample 5: Navigation Placement and Items Positions

The navigation control has a few options how to be placed:

  • Default the navigation has a static position
  • FixedTop the navigation is fixed to the top
  • FixedBottom the navigation is fixed on the bottom
  • StickyTop scrolls with the page until it reaches the top, then stays there
  • StickyBottom scrolls with the page until it reaches the bottom, then stays there

NavBar property Justify allows adding a flex CSS utility class to position the navigation items in a specific way.

<h3>IsJustified = End</h3>
<bs:NavBar Justify="End" Placement="FixedTop" backgroundColor="Primary">
    <BrandTemplate>
        Brand Name
    </BrandTemplate>
    <bs:NavBarSection>
        <bs:NavBarLink Click="{staticCommand: null}">
            item
        </bs:NavBarLink>
        <bs:NavBarDropDown HeaderText="DropDownMenu">
            <bs:DropDownItem>
                item
            </bs:DropDownItem>
        </bs:NavBarDropDown>
    </bs:NavBarSection>
</bs:NavBar>

<bs:NavBar Justify="Center" Placement="FixedBottom" backgroundColor="Primary">
    <BrandTemplate>
        Brand Name
    </BrandTemplate>
    <bs:NavBarSection>
        <bs:NavBarLink Click="{staticCommand: null}">
            item
        </bs:NavBarLink>
        <bs:NavBarDropDown HeaderText="DropDownMenu">
            <bs:DropDownItem>
                item
            </bs:DropDownItem>
        </bs:NavBarDropDown>
    </bs:NavBarSection>
</bs:NavBar>

Properties

Name Type Description Notes Default Value
property icon BrandImageHeight String Gets or sets the brand image height.
attribute
inner element
static value
bindable
default
 null
property icon BrandImageUrl String Gets or sets the brand image URL.
attribute
inner element
static value
bindable
default
 null
property icon BrandImageWidth String Gets or sets the brand image width.
attribute
inner element
static value
bindable
default
 null
property icon BrandLinkUrl String Gets or sets the navigation link for brand image.
attribute
inner element
static value
bindable
default
 null
property icon BrandTemplate ITemplate Gets or sets the a custom template for brand section of the navigation.
attribute
inner element
static value
bindable
default
 null
property icon BrandText String Gets or sets the a plain text for brand section of the navigation.
attribute
inner element
static value
bindable
default
 null
property icon CollapseBehavior NavbarCollapseBehavior Gets or sets the maximum screen to which navbar control can expand.
attribute
inner element
static value
bindable
default
 CollapseOnLarge
property icon Content List<INavBarSection> Gets or sets the inner elements containing only NavText, NavLink, and NavDropDown controls.
attribute
inner element
static value
bindable
default
 null
property icon InnerContainerResponsiveBreakpoint ContainerResponsiveBreakpoints Gets or sets the navigation container size. The default is Fluid, so the navigation takes all available space.
attribute
inner element
static value
bindable
default
 Fluid
property icon Justify BootstrapJustifyContent Gets or sets the flexbox utility CSS class for navigation items.
attribute
inner element
static value
bindable
default
 None
property icon Placement NavBarPlacement Gets or sets the navbar placement. Possible values are Default, FixedTop, FixedBottom, StickyTop, StickyBottom.
attribute
inner element
static value
bindable
default
 Default
property icon TogglerPlacement NavBarTogglerPlacement Gets or sets the placement of a hamburger menu. Possible values are Left or Right.
attribute
inner element
static value
bindable
default
 Right
property icon Type NavBarType Gets or sets the navbar background color.
attribute
inner element
static value
bindable
default
 Default
property icon Visible Boolean Gets or sets whether the control is visible. When set to false, `style="display: none"` will be added to this control.
attribute
inner element
static value
bindable
default
 True

HTML produced by the control