@extends('layouts.vertical', ['pageTitle' => 'Navbars']) @section('css') @endsection @section('page-title') @include('layouts.partials/app-pagetitle', ['pageTitle'=> 'Navbars', 'pageSubTitle1' => 'Design', 'pageSubTitle2'=> 'UI Components', 'pageSubText' => 'Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar.']) @endsection @section('content')

Navbars can be styled using Bootstrap classes, such as .navbar-light and .navbar-dark, to match different themes. Additionally, Bootstrap allows toggling the navbar for mobile views, ensuring an optimal user experience. By utilizing built-in utilities like .fixed-top or .sticky-top, developers can create fixed or sticky navbars that remain visible while scrolling.

Learn more about this component on bootstrap's official documentation.

Supported content

Navbars come with built-in support for a handful of sub-components. Choose from the following as needed:

  • .navbar-brand for your company, product, or project name.
  • .navbar-nav for a full-height and lightweight navigation (including support for dropdowns).
  • .navbar-toggler for use with our collapse plugin and other navigation toggling behaviors.
  • .form-inline for any form controls and actions.
  • .navbar-text for adding vertically centered strings of text.
  • .collapse.navbar-collapse for grouping and hiding navbar contents by a parent breakpoint.

Navbar Brand

The .navbar-brand can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.

Navbar Links

Navbar navigation links build on our .nav options with their own modifier class and require the use of toggler classes for proper responsive styling. Navigation in navbars will also grow to occupy as much horizontal space as possible to keep your navbar contents securely aligned.

Navbar Links using utilities

Mix and match with other components and utilities as needed.

Color Variations

Change navbar colors with these utilities. Note that the .navbar-brand and .navbar-toggler will adapt to blend in with their container.

Header position

Use position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use position: fixed, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the <body>) to prevent overlap with other elements.

Also note that .sticky-top uses position: sticky, which isn't fully supported in every browser
Sticky Element: Scroll Down to See the Effect Scroll down this page to see how sticky positioning works

SmartAdmin is a powerful, feature-rich admin template designed for developers who want to build professional and scalable dashboards. Unlike traditional admin panels, SmartAdmin provides a fully responsive, modern design with a clean UI, making it a perfect choice for applications that require a smooth user experience.

One of SmartAdmin’s biggest advantages is its jQuery-free structure in the latest versions, making it future-proof and optimized for modern JavaScript frameworks like React, Vue, and Angular. This means developers can integrate it easily with their preferred stack without dealing with legacy dependencies. Additionally, it comes packed with ready-to-use components, such as form elements, charts, widgets, and pre-built pages, reducing development time.

Another key feature of SmartAdmin is its modular architecture, allowing developers to customize and extend functionalities effortlessly. Whether you're building a simple dashboard or a complex enterprise solution, SmartAdmin's scalable design ensures that you can add new components without affecting performance. The template also includes a dark mode, which improves accessibility and enhances the user experience in different environments.

Security is another major concern in web development, and SmartAdmin is built with best practices in mind. With role-based access control (RBAC), developers can define user permissions and restrict access to sensitive data. This is crucial for applications requiring different levels of authentication, such as admin panels, financial dashboards, and analytics tools.

SmartAdmin is also well-documented and actively maintained, ensuring developers have access to updates, bug fixes, and new features. The template includes a detailed documentation guide, helping developers quickly integrate and customize it for their needs. Additionally, the SmartAdmin community is growing, offering support through forums, GitHub discussions, and dedicated customer service.

Overall, SmartAdmin is an all-in-one solution for building modern, responsive, and scalable admin dashboards. With its clean design, lightweight architecture, and rich feature set, it’s an excellent choice for startups, enterprises, and developers looking for a robust UI framework. Whether you're working on a SaaS product, internal tool, or data-driven application, SmartAdmin provides everything you need to create a professional and efficient user interface.

Learn More About SmartAdmin

Navbar Icons

Adding profile pictures and dropdowns to nav bars
@endsection @section('scripts') @endsection