# 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](https://demos.telerik.com/aspnet-core/bottomnavigation/appearance).

## Options

The BottomNavigation component provides the following styling options:

* [`ItemFlow()`](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/bottomnavigation/appearance#itemflow)—Sets the position of the labels against the items.
* [`ThemeColor()`](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/bottomnavigation/appearance#themecolor)—Specifies the color applied to the component.
* [`Border()`](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/bottomnavigation/appearance#border)—Toggles the border of the BottomNavigation.
* [`Fill()`](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/bottomnavigation/appearance#fill)—Defines how the color is applied to the BottomNavigation.
* [`Shadow()`](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/bottomnavigation/appearance#shadow)—Sets the shadow of the component.
* [`PositionMode()`](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/navigation/bottomnavigation/appearance#positionmode)—Determines the CSS position of the BottomNavigation in the page.

### ItemFlow

To control the position of the text labels against the items, set the [`ItemFlow`](https://docs.telerik.com/aspnet-core/api/kendo.mvc.ui.fluent/bottomnavigationbuilder#itemflowkendomvcuibottomnavigationitemflow) option to `Vertical` or `Horizonatal`.

```Razor HtmlHelper
    @(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");
        })
    )
```

```Razor TagHelper
    @{
        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`](https://docs.telerik.com/aspnet-core/api/kendo.mvc.ui.fluent/bottomnavigationbuilder#themecolorkendomvcuibottomnavigationthemecolor) configuration provides a variety of colors that can be applied to the component. The available options are:

* `Base`
* `Primary`
* `Secondary`
* `Tertiary`
* `Inverse`

The default `ThemeColor` is `Primary`.

```Razor HtmlHelper
    @(Html.Kendo().BottomNavigation()
        .Name("bottomNavigation")
        .ThemeColor(BottomNavigationThemeColor.Secondary)
        .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");
        })
    )
```

```Razor TagHelper
    @{
        var home = new { view = "home" };
        var calendar = new { view = "calendar" };
        var profile = new { view = "profile" };
    }

    <kendo-bottomnavigation name="bottomNavigation" theme-color="BottomNavigationThemeColor.Secondary">
        <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()`](https://docs.telerik.com/aspnet-core/api/kendo.mvc.ui.fluent/bottomnavigationbuilder#bordersystemboolean) option. By default, the border is visible.

```Razor HtmlHelper
    @(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");
        })
    )
```

```Razor TagHelper
    @{
        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()`](https://docs.telerik.com/aspnet-core/api/kendo.mvc.ui.fluent/bottomnavigationbuilder#fillkendomvcuibottomnavigationfill) method specifies how the color is applied to the component. The default fill mode of the BottomNavigation is `Flat`.

```Razor HtmlHelper
    @(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");
        })
    )
```

```Razor TagHelper
    @{
        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`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) CSS property. You can add a shadow effect by using the [`Shadow()`](https://docs.telerik.com/aspnet-core/api/kendo.mvc.ui.fluent/bottomnavigationbuilder#shadowsystemboolean) option.

```Razor HtmlHelper
    @(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");
        })
    )
```

```Razor TagHelper
    @{
        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()`](https://docs.telerik.com/aspnet-core/api/kendo.mvc.ui.fluent/bottomnavigationbuilder#positionmodekendomvcuibottomnavigationpositionmode) method. The default position of the component is `Fixed`.

```Razor HtmlHelper
    @(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");
        })
    )
```

```Razor TagHelper
    @{
        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:

* `Absolute`
* `Fixed`
* `Sticky`

## See Also

* [Appearance of the BottomNavigation HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/bottomnavigation/appearance)
* [Server-Side API](https://www.telerik.com/aspnet-core-ui/documentation/api/bottomnavigation)
* [Client-Side API](https://docs.telerik.com/kendo-ui/api/ui/bottomnavigation)