mixin SupportedContentDescription
  p&attributes(attributes) #{name} Navbar Top support all of 
    a(href=`https://getbootstrap.com/docs/${bootstrapVersion}/components/navbar/`) Boostrap Navbar 
    | components. 
    code .navbar-brand
    |, 
    code .navbar-nav
    |, 
    code .navbar-toggler
    |, 
    code .form-inline
    |, 
    code .navbar-text
    |, 
    code .collapse.navbar-collapse 
    | those sub-componets are used in Navbar Top.

mixin NavbarTopHTMLCodeDemo
  +ComponentCardLib
    nav.navbar.navbar-light.navbar-glass.navbar-top.navbar-expand-lg
      // Navbar Content

mixin NavbarTopResponsiveBehaviors
  p Navbar Top can utilize 
    code .navbar-toggler
    |, 
    code .navbar-collapse
    |, and 
    code .navbar-expand{-sm|-md|-lg|-xl} 
    | classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.

  p.mb-0 For navbars that never collapse, add the 
    code .navbar-expand 
    | class on the navbar. For navbars that always collapse, don’t add any 
    code .navbar-expand 
    | class.

mixin NavbarTopColorSchemes
  p.mb-0 Changing the color of Navbar Top is very easy. #{name} uses 
    code .navbar-light 
    | for styling Navbar Top. You can use other Bootstrap utilitie classes to update the Navbar. Learn more about Bootstrap Navbar  
    a(href=`https://getbootstrap.com/docs/${bootstrapVersion}/components/navbar/#color-schemes` target="_blank") Color Schemes.