Skip to main content

Item Link Mode

Since NavBar items are navigation elements (links), you can activate a specific link mode in which only certain item elements are clickable. To accomplish this, use the NavBarSettings.ItemLinkMode property. NavBar allows you to specify different modes for groups using the group’s NavBarGroup.ItemLinkMode (via MVCxNavBarGroup.ItemLinkMode) property.

Options include:

TextOnly
Only an item’s text is clickable.
TextAndImage
Only an item’s text and image are clickable.
ContentBounds
The entire item’s content is clickable.

The image below shows two NavBars in two link modes – ContentBounds and TextOnly.

NavBar_ItemLinkMode

The code sample below demonstrates how you can set the ItemLinkMode property.

@Html.DevExpress().NavBar(
    settings => {
        settings.Name = "MyNavBar";
        settings.ItemLinkMode = ItemLinkMode.TextOnly;

        ...

    }).GetHtml()

Note

The Styles.Link property is not in effect when used within the NavBar extension for the ASP.NET MVC. As a workaround, you can define the appearance of links using CSS code.

The code sample below illustrates how to underline links when they are hovered.

<style type="text/css">
        #myNavBar a:hover
        {
            text-decoration: underline;
        }
</style>

@Html.DevExpress().NavBar(settings =>
{
    settings.Name = "myNavBar";
    ...
}).GetHtml()