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.
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 | |
---|---|---|---|---|---|
Attributes | Dictionary<String,Object> |
attribute
static value
|
null | ||
ClientIDMode | ClientIDMode | Gets or sets the client ID generation algorithm. |
attribute
static value
|
Static | |
CollapseButtonTemplate | ITemplate | Gets or sets the template items for collapse button. |
inner element
static value
|
null | |
DataContext | Object | Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value. |
attribute
bindable
|
null | |
DataSource | Object | Gets or sets the source collection or a GridViewDataSet that contains data in the control. |
attribute
bindable
|
null | |
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
static value
bindable
|
null | |
HeaderLinkUrl | String | Gets or sets URL which will be Header linked to. |
attribute
static value
bindable
|
null | |
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
static value
bindable
|
null | |
ID | String | Gets or sets the unique control ID. |
attribute
static value
bindable
|
null | |
IncludeInPage | Boolean | Gets or sets whether the control is included in the DOM of the page. |
attribute
bindable
|
True | |
InnerText | String | Gets or sets the inner text of the HTML element. |
attribute
static value
bindable
|
null | |
IsEnabledBinding | IValueBinding | Gets or sets a value binding that points to a property indicating whether the item is disabled or not. |
attribute
bindable
|
null | |
IsSelectedBinding | IValueBinding | Gets or sets a value binding that points to a property indicating whether the item is selected or not. |
attribute
bindable
|
null | |
ItemsContentTemplate | ITemplate | Gets or sets the template for contents of the generated items when using the DataSource property. |
inner element
static value
|
null | |
LeftAlignedItems | List<IResponsiveNavigationItem> | Gets or sets a collection of responsive navigation items which would be aligned to the left. |
inner element
static value
default
|
null | |
MaximumScreenSizeBeforeCollapse | ResponsiveBreakpoints | Gets or sets the maximum screen size in which the navbar should still be collapsed. Setting to none will disable collapsing. |
attribute
static value
|
Medium | |
NavigateUrlBinding | IValueBinding | Gets or sets the value binding that points to a property which will be navigated to when the item is clicked. |
attribute
bindable
|
null | |
RightAlignedItems | List<IResponsiveNavigationItem> | Gets or sets a collection of responsive navigation items which would be aligned to the right. |
inner element
static value
|
null | |
ScrollBehavior | ResponsiveNavigationScrollBehavior | Gets or sets how would ResponsiveNavigation react when It's scrolled out of screen. |
attribute
static value
|
None | |
ScrollSpyEnabled | Boolean |
attribute
static value
bindable
|
False | ||
ScrollSpyOffset | Int32 |
attribute
static value
|
10 | ||
TextBinding | IValueBinding | Gets or sets the value binding that points to a property which will be used as the text of the item. |
attribute
bindable
|
null | |
Theme | ResponsiveNavigationTheme | Gets or sets color theme of the navbar. Use ColorDecorators to set text and background colors. |
attribute
static value
|
Light | |
Visible | Boolean | Gets or sets whether the control is visible. |
attribute
bindable
|
True |
Events
Name | Type | Description | |
---|---|---|---|
ClickBinding | ICommandBinding | Gets or sets a binding which defines a click action for button items. |