Edit on Github

ResponsiveNavigation

in namespace DotVVM.Framework.Controls.Bootstrap4

Renders Bootstrap Navbar widget.

Usage & Scenarios

Renders a Bootstrap Navbar widget.

Each menu item in the ResponsiveNavigation control is represented by the NavigationItem control. You can also use Form and DropDownButton controls inside the navigation bar.

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

Sample 1: Basic Usage

The HeaderText property specifies the text that will be placed in the logo section of the navbar.

If the HeaderLinkUrl property is set, the header will be rendered as a hyperlink for that URL.

<bs:ResponsiveNavigation HeaderText="Header" 
                         HeaderLinkUrl="http://www.dotvvm.com">
  <bs:NavigationItem NavigateUrl="https://www.google.com/" 
                     Text="Google"
                     IsSelected="true" />
  <bs:NavigationItem NavigateUrl="http://www.w3schools.com/html/"
                     Text="W3 Schools"
                     Enabled="false" />
</bs:ResponsiveNavigation>

Sample 2: Styling ResponsiveNavigation

If the HeaderImageUrl is set, the header section will render the image. The HeaderImageAltText will set alt property of image and HeaderImageTooltip will set the title property.

The Theme property allows to switch between Light and Dark theme.

The ScrollBehavior property allows the specify how the navbar should behave when the page is scrolled - the options are None, FixedTop, FixedBottom or StickyTop.

<bs:ResponsiveNavigation 
        HeaderImageUrl="~/Images/person.png" 
        HeaderImageAltText="Alt text for image" 
        HeaderImageTooltip="tooltip text for image" 
        HeaderLinkUrl="http://www.dotvvm.com" 
        Theme="Dark" 
        ScrollBehavior="StickyTop">

    <bs:NavigationItem NavigateUrl="https://www.google.com/" Text="Google" />
    <bs:NavigationItem NavigateUrl="http://www.w3schools.com/html/" Text="W3 Schools" />
</bs:ResponsiveNavigation>

Sample 3: Alignment

The items inside the ResponsiveNavigation can also be aligned to the left or right side by placing the items into the LeftAlignedItems and RightAlignedItems properties.

<bs:ResponsiveNavigation HeaderText="Alignments">  
  <LeftAlignedItems>
    <bs:NavigationItem NavigateUrl="http://www.w3schools.com/html/" Text="W3 Schools" />
  </LeftAlignedItems>
  <RightAlignedItems>
    <bs:NavigationItem NavigateUrl="https://www.google.com/" Text="Google" />
  </RightAlignedItems>
</bs:ResponsiveNavigation>

Sample 4: DropDownButton and Form Controls in ResponsiveNavigation

Except of the NavigationItem controls, you can also use Form and DropDownButton controls inside the navigation bar.

You have to place them in the LeftAlignedItems or RightAlignedItems elements.

There are some limitations of the Bootstrap navbar. For example, the Form control Type must be set to Inline mode.

<bs:ResponsiveNavigation>
  <LeftAlignedItems>
    <bs:NavigationItem NavigateUrl="https://www.google.com/" Text="Google" IsSelected="true" />
    <bs:NavigationItem NavigateUrl="http://www.w3schools.com/html/" Text="W3 Schools" Enabled="false" />
    
    <bs:DropDownButton Text="DropDownButton">
      <Items>
        <bs:DropDownButtonItem NavigateUrl="https://www.google.com/">
          Google
        </bs:DropDownButtonItem>
        <bs:DropDownButtonItem NavigateUrl="https://github.com/riganti/dotvvm">
          DotVVM
        </bs:DropDownButtonItem>
      </Items>
    </bs:DropDownButton>
  </LeftAlignedItems>

  <RightAlignedItems>
    <bs:Form Type="Inline">
      <bs:FormGroup>
        <bs:TextBox Text="TEST" />
      </bs:FormGroup>
    </bs:Form>
  </RightAlignedItems>
</bs:ResponsiveNavigation>

Sample 5: Responsiveness

It's possible to collapse the ResponsiveNavigation into a single button when the content cannot fit the screen.

The MaximumScreenSizeBeforeCollapse specifies the maximum screen size in which the navbar should be collapsed. Default is Medium.

Optionally, you can set your own content of the collapsed button by placing in into the CollapsedButtonTemplate template. If the CollapsedButtonTemplate is not set, the standard button with three stripes will be rendered.

<bs:ResponsiveNavigation 
    HeaderText="If this menu cannot fit screen it will collapse to button." 
    MaximumScreenSizeBeforeCollapse="Small">
  <CollapseButtonTemplate>
      Menu Button
  </CollapseButtonTemplate>
  
  <bs:NavigationItem NavigateUrl="https://www.google.cz/" Text="Google" />
  <bs:NavigationItem NavigateUrl="http://www.w3schools.com/html/" Text="W3 Schools" />
</bs:ResponsiveNavigation>

Sample 6: ResponsiveNavigation Data-Binding

The ResponsiveNavigation can be also used with the DataSource property to generate the menu items from the collection.

The TextBinding property specifies which property of the collection items will be used as the text of the menu item.

The NavigateUrlBinding property specifies which property will be used as the URL of the hyperlink.

You can also use the IsEnabledBinding to specify which property controls whether the menu item is enabled or disabled.

Also, there is the IsSelectedBinding property which controls whether the menu item is active.

<bs:ResponsiveNavigation DataSource="{value: LinksDataSet}" 
                         IsEnabledBinding="{value: IsDisabled}" 
						 IsSelectedBinding="{value: IsSelected}"
					     TextBinding="{value: Text}" 
						 NavigateUrlBinding="{value: NavigateUrl}">
</bs:ResponsiveNavigation>
using System.Collections.Generic;
using System.Linq;

namespace DotvvmWeb.Views.Docs.Controls.bootstrap.ResponsiveNavigation.sample6
{
    public class ViewModel
    {
        public List<NavigationItem> LinksDataSet { get; set; }

        private static IQueryable<NavigationItem> GetData()
        {
            return new[]
            {
                new NavigationItem() {  IsDisabled = false, IsSelected = false, NavigateUrl = "https://www.google.com/", Text = "Google"},
                new NavigationItem() {  IsDisabled = true, IsSelected = false, NavigateUrl = "http://www.w3schools.com/html/", Text = "W3Schools"},
                new NavigationItem() {  IsDisabled = false, IsSelected = true, NavigateUrl = "https://www.microsoft.com/en-us/", Text = "Microsoft"},
                new NavigationItem() {  IsDisabled = 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 IsDisabled { get; set; }
    }
}

Sample 7: Header Template

The HeaderTemplate can be used instead of specifying header properties (text, image source,...) using ResponsiveNavigation properties.

The content of this property would be inserted into header link.

<bs:ResponsiveNavigation HeaderLinkUrl="https://www.google.com">
    <HeaderTemplate>
        Text inside header link.
    </HeaderTemplate>
</bs:ResponsiveNavigation>

Properties

Name Type Description Notes Default Value
property icon CollapseButtonTemplate ITemplate Gets or sets the template items for collapse button.
attribute
inner element
static value
bindable
default
 null
property icon DataSource Object Gets or sets the source collection or a GridViewDataSet that contains data in the control.
attribute
inner element
static value
bindable
default
 null
property icon HeaderImageUrl String Gets or sets image URL that will be put in header. If HeaderText is set it will be used as alternate image text.
attribute
inner element
static value
bindable
default
 null
property icon HeaderLinkUrl String Gets or sets URL which will be Header linked to.
attribute
inner element
static value
bindable
default
 null
property icon HeaderText String Gets or sets text that will be put in header. If HeaderImage is set this text will be used as alternate image text.
attribute
inner element
static value
bindable
default
 null
property icon IsEnabledBinding IValueBinding Gets or sets a value binding that points to a property indicating whether the item is disabled or not.
attribute
inner element
static value
bindable
default
 null
property icon IsSelectedBinding IValueBinding Gets or sets a value binding that points to a property indicating whether the item is selected or not.
attribute
inner element
static value
bindable
default
 null
property icon ItemsContentTemplate ITemplate Gets or sets the template for contents of the generated items when using the DataSource property.
attribute
inner element
static value
bindable
default
 null
property icon LeftAlignedItems List<IResponsiveNavigationItem> Gets or sets a collection of responsive navigation items which would be aligned to the left.
attribute
inner element
static value
bindable
default
 null
property icon MaximumScreenSizeBeforeCollapse ResponsiveBreakpoints Gets or sets the maximum screen size in which the navbar should still be collapsed. Setting to none will disable collapsing.
attribute
inner element
static value
bindable
default
 Medium
property icon NavigateUrlBinding IValueBinding Gets or sets the value binding that points to a property which will be navigated to when the item is clicked.
attribute
inner element
static value
bindable
default
 null
property icon RightAlignedItems List<IResponsiveNavigationItem> Gets or sets a collection of responsive navigation items which would be aligned to the right.
attribute
inner element
static value
bindable
default
 null
property icon ScrollBehavior ResponsiveNavigationScrollBehavior Gets or sets how would ResponsiveNavigation react when It's scrolled out of screen.
attribute
inner element
static value
bindable
default
 None
property icon ScrollSpyEnabled Boolean
attribute
inner element
static value
bindable
default
 False
property icon ScrollSpyOffset Int32
attribute
inner element
static value
bindable
default
 10
property icon TextBinding IValueBinding Gets or sets the value binding that points to a property which will be used as the text of the item.
attribute
inner element
static value
bindable
default
 null
property icon Theme ResponsiveNavigationTheme Gets or sets color theme of the navbar. Use ColorDecorators to set text and background colors.
attribute
inner element
static value
bindable
default
 Light

Events

Name Type Description
event icon ClickBinding ICommandBinding Gets or sets a binding which defines a click action for button items.

HTML produced by the control

Information about cookies

We use cookies to analyze our traffic, personalize content and ads, and to provide some social media features. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services.

Edit options

Information about cookies

We use cookies to analyze our traffic, personalize content and ads, and to provide some social media features. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services.

Choose which cookies you want to enable

Necessary cookies Always allowed

Necessary cookies are essential and maintain information based on your activity on our site, like remembering your signed in account, selection of your language, or products added to the shopping cart. The website cannot work properly without these cookies.

Google Analytics

We use these cookies to measure, collect, analyse and report how users interact with our sites to better understand their behavior. Thanks to this, we can improve the site and provide better experience. The analytics service is provided by Google Inc.

Google Ads

We use these cookies to measure conversions from our advertisement and banners distributed via Google Ads. This allows us to better target the ads and make them more relevant to you.

Facebook Pixel

We use these cookies to measure conversions from our advertisement and banners distributed via Facebook. This allows us to better target the ads and make them more relevant to you.

Smartlook

We use these cookies to measure, collect, analyse and report how users interact with our sites to better understand their behavior. Thanks to this, we can improve the site and provide better experience. The analytics service is provided by Smartlook.

Google ads user data

Google ads ad personalization