UI for ASP.NET MVC
ASP.NET MVC AppBar
- Use the ASP.NET MVC AppBar component to build primary site navigations. Featuring customization options like mode state, position, color, items, themes and more.
- Part of the Telerik UI for ASP.NET MVC library along with 110+ professionally designed UI components.
- Includes support, documentation, demos, virtual classrooms and more!
-
Overview
Easily create navigation panes for your users with the Telerik UI for ASP.NET MVC AppBar control. Serving as a navigation container, it can be positioned either as a header or a footer. Whether you are building a standard company website footer, need a “Products” and an “About Us” section or something more complex, the AppBar’s templates will let you customize it as you see fit.
See the ASP.NET MVC AppBar in action
-
Items
With the AppBar component, you can choose from two types of items—a ContentItem and a Spacer, which can be used to separate the ContentItems.
-
Template-Driven
The AppBar offers the flexibility of a template-driven control, which makes it a great fit for all your projects. You can supply an external Template to the component by specifying the TemplateId option for the ContentItem, set it to consume and render HTML or supply a kendo.template to the configuration.
-
Positioning
The AppBar has three predefined options for positioning—None, Top and Bottom. You can use the Top and Bottom options as a Header and Footer, respectively. If you decide to apply the None option, no positioning CSS style will be applied. In terms of Position Mode, you can choose from static, sticky and fixed options, depending on your project’s needs.
-
Events
Because the AppBar supports resizing, it also provides a resize event that is fired when the window is resized. This gives you control over the visibility of the AppBar items when the visible part of the viewport changes.
-
AppBar Theming
The ASP.NET AppBar is part of the Telerik UI for ASP.NET MVC suite, which comes with multiple built-in themes and swatches you can choose from. Explore the Default (our own styling), Material (based on the Material Design guidelines), Bootstrap (for seamless integration with Bootstrap) and Fluent (based on Microsoft Fluent UI) themes and choose the swatch that best meets your design requirements.
If neither of the available themes and swatches satisfies your needs, you can easily customize them with a few lines of CSS or create new themes by using the Progress SASS ThemeBuilder application.
