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