Floating

<template>
 <FloatingNavbar
  expand="lg"
 >
  <examples-snippets-navbar-demo-navbar-content />
 </FloatingNavbar>
</template>

<template>
 <NavbarBrand
  href="/"
  aria-label="use bootstrap"
 >
  <img
   src="~/assets/img/logo/logo1.svg"
   height="30"
   alt="Logo"
  />
 </NavbarBrand>
 <NavbarToggler />
 <NavbarCollapse>
  <NavbarNavList margin="e-auto">
   <NavItemDropdown>
    <NavItemDropdownToggle>
     Bootstrap
    </NavItemDropdownToggle>
    <DropdownMenu
     mega
     relative-width="100"
     background-color="transparent"
     border-subtractive
     class="animated animated-fade-in"
    >
     <Container>
      <Row
       background-color="white"
       shadow
       gutter="0"
      >
       <Col
        col="lg-6"
       >
        <Background
         background-color="primary-subtle"
         overlay-color="pink-500"
         overlay-alpha="0.5"
         z="1"
         padding="5"
         relative-height="100"
        >
         <b-div headings="2">
          Bootstrap
         </b-div>
         <p>Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.</p>
         <Anchor
          button
          color="primary"
          to="/lang-en"
          icon="bi-chevron-right"
          icon-end
         >
          Learn more
         </Anchor>
        </Background>
       </Col>
       <Col
        col="lg-6"
        padding="3"
       >
        <ViewState
         v-slot="navs"
         src="app-config://test"
        >
         <DropdownItem
          v-for="item in navs.data"
          :key="item.name"
          header
          dynamic-route
          :to="item.children[0].path"
         >
          {{ item.name }}
         </DropdownItem>
        </ViewState>
       </Col>
      </Row>
     </Container>
    </DropdownMenu>
   </NavItemDropdown>
   <NavItemDropdown>
    <NavItemDropdownToggle>
     Extend
    </NavItemDropdownToggle>
    <DropdownMenu
     mega
     relative-width="100"
     background-color="transparent"
     border-subtractive
     class="animated animated-fade-in"
    >
     <Container>
      <Row
       background-color="white"
       shadow
       gutter="0"
      >
       <Col
        col="lg-6"
       >
        <Background
         background-color="primary-subtle"
         overlay-color="pink-500"
         overlay-alpha="0.5"
         relative-height="100"
         z="1"
         padding="5"
        >
         <b-div headings="2">
          Extend
         </b-div>
         <p>use-bootstrap builds complete applications by adding features that are not included in Bootstrap.</p>
         <Anchor
          button
          color="primary"
          to="/lang-en/extend"
          icon="bi-chevron-right"
          icon-end
         >
          Learn more
         </Anchor>
        </Background>
       </Col>

       <Col
        col="lg-6"
        padding="3"
       >
        <ViewState
         v-slot="navs"
         src="app-config://usebootstrap/navigations/extend"
        >
         <DropdownItem
          v-for="item in navs.data"
          :key="item.name"
          header
          dynamic-route
          :to="item.children[0].path"
         >
          {{ item.name }}
         </DropdownItem>
        </ViewState>
       </Col>
      </Row>
     </Container>
    </DropdownMenu>
   </NavItemDropdown>
   <NavItemDropdown>
    <NavItemDropdownToggle>
     Integration
    </NavItemDropdownToggle>
    <DropdownMenu
     mega
     relative-width="100"
     background-color="transparent"
     border-subtractive
     class="animated animated-fade-in"
    >
     <Container>
      <Row
       background-color="white"
       shadow
       gutter="0"
      >
       <Col
        col="lg-6"
       >
        <Background
         background-color="primary-subtle"
         overlay-color="pink-500"
         overlay-alpha="0.5"
         relative-height="100"
         z="1"
         padding="5"
        >
         <b-div headings="2">
          Integration
         </b-div>
         <p>use-bootstrap provides powerful components for integrating server and client data.</p>
         <Anchor
          button
          color="primary"
          to="/lang-en/integration"
          icon="bi-chevron-right"
          icon-end
         >
          Learn more
         </Anchor>
        </Background>
       </Col>

       <Col
        col="lg-6"
        padding="3"
       >
        <ViewState
         v-slot="navs"
         src="app-config://usebootstrap/navigations/integration"
        >
         <DropdownItem
          v-for="item in navs.data"
          :key="item.name"
          header
          dynamic-route
          :to="item.children[0].path"
         >
          {{ item.name }}
         </DropdownItem>
        </ViewState>
       </Col>
      </Row>
     </Container>
    </DropdownMenu>
   </NavItemDropdown>
   <NavItemDropdown>
    <NavItemDropdownToggle>
     Snippets
    </NavItemDropdownToggle>
    <DropdownMenu
     mega
     relative-width="100"
     background-color="transparent"
     border-subtractive
     class="animated animated-fade-in"
    >
     <Container>
      <Row
       background-color="white"
       shadow
       gutter="0"
      >
       <Col
        col="lg-6"
       >
        <Background
         background-color="primary-subtle"
         overlay-color="pink-500"
         overlay-alpha="0.5"
         relative-height="100"
         z="1"
         padding="5"
        >
         <b-div headings="2">
          Snippets
         </b-div>
         <p>use-bootstrap builds complete applications by adding features that are not included in Bootstrap.</p>
         <Anchor
          button
          color="primary"
          to="/snippets"
          icon="bi-chevron-right"
          icon-end
         >
          Learn more
         </Anchor>
        </Background>
       </Col>

       <Col
        col="lg-6"
        padding="3"
       >
        <ViewState
         v-slot="navs"
         src="app-config://usebootstrap/navigations/snippets"
        >
         <DropdownItem
          v-for="item in navs.data"
          :key="item.name"
          header
          dynamic-route
          :to="item.children[0].path"
         >
          {{ item.name }}
         </DropdownItem>
        </ViewState>
       </Col>
      </Row>
     </Container>
    </DropdownMenu>
   </NavItemDropdown>
   <NavItem>
    <NavLink
     to="/examples"
     padding="x-0 x-lg-2"
    >
     Examples
    </NavLink>
   </NavItem>
  </NavbarNavList>
  <NavbarNavList
   flex-direction="row"
   flex-wrap="wrap"
   margin="s-md-auto"
  >
   <NavItem
    padding="y-2"
    col="12 lg-auto"
   >
    <Vr
     display="none lg-flex"
     relative-height="100"
     margin="x-lg-2"
     text-color="black-50"
    />
    <hr class="d-lg-none my-2 text-black-50" />
   </NavItem>
   <NavItem col="6 lg-auto">
    <NavLink
     to="https://stackblitz.com/~/github.com/simplise/use-bootstrap-starter?file=app.vue"
     icon="simple-icons:stackblitz"
    />
   </NavItem>
   <NavItem col="6 lg-auto">
    <NavLink
     to="https://github.com/simplise/use-bootstrap"
     icon="bi:github"
    />
   </NavItem>
  </NavbarNavList>
 </NavbarCollapse>
</template>