Skip to main content

Item Bullet Style

  • 2 minutes to read

The NavBar allows you to apply a bulleted or numbered list format to group items. Use the NavBarGroup.ItemBulletStyle (via MVCxNavBarGroup.ItemBulletStyle) property to specify a bullet style for items in the group.

The table below lists the available bullet styles.

Name Description Appearance
Circle The bullet style is an empty circle shape. NavBar_Bullet1
Decimal The bullet style is a number. 1, 2, 3, …
Disc The bullet style is a filled circle shape. NavBar_Bullet3
LowerAlpha The bullet style is a lowercase letter. a, b, c, …
LowerRoman The bullet style is a lowercase Roman numeral. i, ii, iii, …
None The bullet style is not applied to group items. none
Square The bullet style is a filled square shape. NavBar_Bullet2
UpperAlpha The bullet style is an uppercase letter. A, B, C, …
UpperRoman The bullet style is an uppercase Roman numeral. I, II, III, …

Note

If custom images are associated with items (via the NavBarSettings.Images.Item, MVCxNavBarGroup.ItemImage or MVCxNavBarItem.Image property), these images are displayed instead of bullet images.

The code sample below demonstrates how different bullet styles can be defined for different groups. The image below shows the result.

NavBar_ItemBulletStyle

View code (ASPX):

<%
    Html.DevExpress().NavBar(
     settings => {
         settings.Name = "MyNavBar";
         settings.Width = 300;
         settings.Groups.Add(
             group => {
                 group.Text = "New features";
                 group.ItemBulletStyle = ItemBulletStyle.UpperAlpha;
                 group.Items.Add("Modern design");
                 group.Items.Add("High technology");
                 group.Items.Add("Best architecture");
             });
         settings.Groups.Add(
            group => {
                group.Text = "Advantages";
                group.ItemBulletStyle = ItemBulletStyle.UpperRoman;
                group.Items.Add("Power performanse optimization");
                group.Items.Add("Full compatibility with all modern standarts");
                group.Items.Add("Advanced usability");
            });
         settings.Groups.Add(
             group => {
                 group.Text = "Benefits";
                 group.ItemBulletStyle = ItemBulletStyle.Decimal;
                 group.Items.Add("Low cost and flexible license management");
                 group.Items.Add("Simple deployment and maintain");
                 group.Items.Add("Effective around-the-clock support");
             });
     }).Render();
    %>

View code (Razor):

@Html.DevExpress().NavBar(
    settings => {
        settings.Name = "MyNavBar";
        settings.Width = 300;
        settings.Groups.Add(
            group => {
                group.Text = "New features";
                group.ItemBulletStyle = ItemBulletStyle.UpperAlpha;
                group.Items.Add("Modern design");
                group.Items.Add("High technology");
                group.Items.Add("Best architecture");
            });
        settings.Groups.Add(
            group => {
                group.Text = "Advantages";
                group.ItemBulletStyle = ItemBulletStyle.UpperRoman;
                group.Items.Add("Power performanse optimization");
                group.Items.Add("Full compatibility with all modern standarts");
                group.Items.Add("Advanced usability");
           });
        settings.Groups.Add(
            group => {
                group.Text = "Benefits";
                group.ItemBulletStyle = ItemBulletStyle.Decimal;
                group.Items.Add("Low cost and flexible license management");
                group.Items.Add("Simple deployment and maintain");
                group.Items.Add("Effective around-the-clock support");
            });
    }).GetHtml()