Item Bullet Style

Feb 02, 2023
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.
Decimal	The bullet style is a number.	1, 2, 3, …
Disc	The bullet style is a filled circle shape.
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.
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.

View code (ASPX):

csharp

<%
    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):

csharp

@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()