Appearance
In this article, you will find information about the styling options of the Telerik UI for ASP.NET MVC BottomNavigation that allow you to customize the overall component appearance based on your needs and preferences.
For a complete example, refer to the Appearance Demo of the BottomNavigation.
Options
The BottomNavigation component provides the following styling options:
-
ItemFlow()—Sets the position of the labels against the items. -
ThemeColor()—Specifies the color applied to the component. -
Border()—Toggles the border of the BottomNavigation. -
Fill()—Defines how the color is applied to the BottomNavigation. -
Shadow()—Sets the shadow of the component. -
PositionMode()—Determines the CSS position of the BottomNavigation in the page.
ItemFlow
To control the the position of the text labels against the items, set the ItemFlow option to Vertical or Horizonatal.
@(Html.Kendo().BottomNavigation()
.Name("bottomNavigation")
.ItemFlow(BottomNavigationItemFlow.Vertical)
.Items(i =>
{
i.Add().Text("Home").Data(new { view = "home" }).Icon("home").Selected(true);
i.Add().Text("Calendar").Data(new { view = "calendar" }).Icon("calendar-date");
i.Add().Text("Profile").Data(new { view = "profile" }).Icon("user");
})
)
ThemeColor
The ThemeColor configuration provides a variety of colors that can be applied to the component. The available options are:
DefaultPrimarySecondaryTertiaryInfoSuccessWarningErrorDarkLightInverse-
Inherit(no coloring will be applied)
The default ThemeColor is Primary.
@(Html.Kendo().BottomNavigation()
.Name("bottomNavigation")
.ThemeColor(BottomNavigationThemeColor.Info)
.Items(i =>
{
i.Add().Text("Home").Data(new { view = "home" }).Icon("home").Selected(true);
i.Add().Text("Calendar").Data(new { view = "calendar" }).Icon("calendar-date");
i.Add().Text("Profile").Data(new { view = "profile" }).Icon("user");
})
)
Border
You can toggle the visibility of the border around the BottomNavigation through the Border() option. By default, the border is visible.
@(Html.Kendo().BottomNavigation()
.Name("bottomNavigation")
.Border(false)
.Items(i =>
{
i.Add().Text("Home").Data(new { view = "home" }).Icon("home").Selected(true);
i.Add().Text("Calendar").Data(new { view = "calendar" }).Icon("calendar-date");
i.Add().Text("Profile").Data(new { view = "profile" }).Icon("user");
})
)
Fill
The Fill() method specifies how the color is applied to the component. The default fill mode of the BottomNavigation is Flat.
@(Html.Kendo().BottomNavigation()
.Name("bottomNavigation")
.Fill(BottomNavigationFill.Solid)
.Items(i =>
{
i.Add().Text("Home").Data(new { view = "home" }).Icon("home").Selected(true);
i.Add().Text("Calendar").Data(new { view = "calendar" }).Icon("calendar-date");
i.Add().Text("Profile").Data(new { view = "profile" }).Icon("user");
})
)
Shadow
By default, the BottomNavigation does not have a box-shadow CSS property. You can add a shadow effect by using the Shadow() option.
@(Html.Kendo().BottomNavigation()
.Name("bottomNavigation")
.Shadow(true)
.Items(i =>
{
i.Add().Text("Home").Data(new { view = "home" }).Icon("home").Selected(true);
i.Add().Text("Calendar").Data(new { view = "calendar" }).Icon("calendar-date");
i.Add().Text("Profile").Data(new { view = "profile" }).Icon("user");
})
)
PositionMode
The CSS position of the BottomNavigation in the document can be defined through the PositionMode() method. The default position of the component is Fixed.
@(Html.Kendo().BottomNavigation()
.Name("bottomNavigation")
.PositionMode(BottomNavigationPositionMode.Absolute)
.Items(i =>
{
i.Add().Text("Home").Data(new { view = "home" }).Icon("home").Selected(true);
i.Add().Text("Calendar").Data(new { view = "calendar" }).Icon("calendar-date");
i.Add().Text("Profile").Data(new { view = "profile" }).Icon("user");
})
)
The following values are available for the PositionMode option:
AbsoluteFixedSticky