Appearance
In this article, you will find information about the styling options of the Telerik UI for ASP.NET Core 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");
})
)
@{
var home = new { view = "home" };
var calendar = new { view = "calendar" };
var profile = new { view = "profile" };
}
<kendo-bottomnavigation name="bottomNavigation" item-flow="BottomNavigationItemFlow.Vertical">
<bottomnavigation-items>
<bottomnavigation-item context-data="@home" text="Home" icon="home" selected="true"></bottomnavigation-item>
<bottomnavigation-item context-data="@calendar" text="Calendar" icon="calendar-date"></bottomnavigation-item>
<bottomnavigation-item context-data="@profile" text="Profile" icon="user"></bottomnavigation-item>
</bottomnavigation-items>
</kendo-bottomnavigation>
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");
})
)
@{
var home = new { view = "home" };
var calendar = new { view = "calendar" };
var profile = new { view = "profile" };
}
<kendo-bottomnavigation name="bottomNavigation" theme-color="BottomNavigationThemeColor.Info">
<bottomnavigation-items>
<bottomnavigation-item context-data="@home" text="Home" icon="home" selected="true"></bottomnavigation-item>
<bottomnavigation-item context-data="@calendar" text="Calendar" icon="calendar-date"></bottomnavigation-item>
<bottomnavigation-item context-data="@profile" text="Profile" icon="user"></bottomnavigation-item>
</bottomnavigation-items>
</kendo-bottomnavigation>
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");
})
)
@{
var home = new { view = "home" };
var calendar = new { view = "calendar" };
var profile = new { view = "profile" };
}
<kendo-bottomnavigation name="bottomNavigation" border="false">
<bottomnavigation-items>
<bottomnavigation-item context-data="@home" text="Home" icon="home" selected="true"></bottomnavigation-item>
<bottomnavigation-item context-data="@calendar" text="Calendar" icon="calendar-date"></bottomnavigation-item>
<bottomnavigation-item context-data="@profile" text="Profile" icon="user"></bottomnavigation-item>
</bottomnavigation-items>
</kendo-bottomnavigation>
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");
})
)
@{
var home = new { view = "home" };
var calendar = new { view = "calendar" };
var profile = new { view = "profile" };
}
<kendo-bottomnavigation name="bottomNavigation" fill="BottomNavigationFill.Solid">
<bottomnavigation-items>
<bottomnavigation-item context-data="@home" text="Home" icon="home" selected="true"></bottomnavigation-item>
<bottomnavigation-item context-data="@calendar" text="Calendar" icon="calendar-date"></bottomnavigation-item>
<bottomnavigation-item context-data="@profile" text="Profile" icon="user"></bottomnavigation-item>
</bottomnavigation-items>
</kendo-bottomnavigation>
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");
})
)
@{
var home = new { view = "home" };
var calendar = new { view = "calendar" };
var profile = new { view = "profile" };
}
<kendo-bottomnavigation name="bottomNavigation" shadow="true">
<bottomnavigation-items>
<bottomnavigation-item context-data="@home" text="Home" icon="home" selected="true"></bottomnavigation-item>
<bottomnavigation-item context-data="@calendar" text="Calendar" icon="calendar-date"></bottomnavigation-item>
<bottomnavigation-item context-data="@profile" text="Profile" icon="user"></bottomnavigation-item>
</bottomnavigation-items>
</kendo-bottomnavigation>
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");
})
)
@{
var home = new { view = "home" };
var calendar = new { view = "calendar" };
var profile = new { view = "profile" };
}
<kendo-bottomnavigation name="bottomNavigation" position-mode="BottomNavigationPositionMode.Absolute">
<bottomnavigation-items>
<bottomnavigation-item context-data="@home" text="Home" icon="home" selected="true"></bottomnavigation-item>
<bottomnavigation-item context-data="@calendar" text="Calendar" icon="calendar-date"></bottomnavigation-item>
<bottomnavigation-item context-data="@profile" text="Profile" icon="user"></bottomnavigation-item>
</bottomnavigation-items>
</kendo-bottomnavigation>
The following values are available for the PositionMode option:
AbsoluteFixedSticky