import{Bt as e,It as t,Lt as n,Mt as r,Qt as i,Vt as a,Xt as o,qt as s}from"./index-qNrWYJXL.js";var c={};function l(r,c){let l=o(`DocsComponents`),u=o(`CCardHeader`),d=o(`CNavLink`),f=o(`CNavItem`),p=o(`CNav`),m=o(`DocsExample`),h=o(`CCardBody`),g=o(`CCard`),_=o(`CCol`),v=o(`CDropdownToggle`),y=o(`CDropdownItem`),b=o(`CDropdownMenu`),x=o(`CDropdown`),S=o(`CRow`);return s(),n(S,null,{default:i(()=>[a(_,{xs:12},{default:i(()=>[a(l,{href:`components/nav.html`}),a(g,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[0]||=[t(`strong`,null,`Vue Navs`,-1),e(),t(`small`,null,`Base navs`,-1)]]),_:1}),a(h,null,{default:i(()=>[c[9]||=t(`p`,{class:`text-body-secondary small`},[e(` The base `),t(`code`,null,`.nav`),e(` component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling. `)],-1),a(m,{href:`components/nav.html#base-nav`},{default:i(()=>[a(p,null,{default:i(()=>[a(f,null,{default:i(()=>[a(d,{href:`#`,active:``},{default:i(()=>[...c[1]||=[e(` Active `,-1)]]),_:1})]),_:1}),a(f,null,{default:i(()=>[a(d,{href:`#`},{default:i(()=>[...c[2]||=[e(`Link`,-1)]]),_:1})]),_:1}),a(f,null,{default:i(()=>[a(d,{href:`#`},{default:i(()=>[...c[3]||=[e(`Link`,-1)]]),_:1})]),_:1}),a(f,null,{default:i(()=>[a(d,{href:`#`,disabled:``},{default:i(()=>[...c[4]||=[e(` Disabled `,-1)]]),_:1})]),_:1})]),_:1})]),_:1}),c[10]||=t(`p`,{class:`text-body-secondary small`},[e(` Classes are used throughout, so your markup can be super flexible. Use `),t(`code`,null,`<ul>`),e(`s like above, `),t(`code`,null,`<ol>`),e(` if the order of your items is important, or roll your own with a `),t(`code`,null,`<nav>`),e(` element. Because the .nav uses display: flex, the nav links behave the same as nav items would, but without the extra markup. `)],-1),a(m,{href:`components/nav.html#base-nav`},{default:i(()=>[a(p,{as:`nav`},{default:i(()=>[a(d,{href:`#`,active:``},{default:i(()=>[...c[5]||=[e(` Active `,-1)]]),_:1}),a(d,{href:`#`},{default:i(()=>[...c[6]||=[e(`Link`,-1)]]),_:1}),a(d,{href:`#`},{default:i(()=>[...c[7]||=[e(`Link`,-1)]]),_:1}),a(d,{href:`#`,disabled:``},{default:i(()=>[...c[8]||=[e(` Disabled `,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),a(_,{xs:12},{default:i(()=>[a(g,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[11]||=[t(`strong`,null,`Vue Navs`,-1),e(),t(`small`,null,`Horizontal alignment`,-1)]]),_:1}),a(h,null,{default:i(()=>[c[20]||=t(`p`,{class:`text-body-secondary small`},[e(` Change the horizontal alignment of your nav with `),t(`a`,{href:`https://coreui.io/docs/layout/grid/#horizontal-alignment`},` flexbox utilities `),e(` . By default, navs are left-aligned, but you can easily change them to center or right aligned. `)],-1),c[21]||=t(`p`,{class:`text-body-secondary small`},[e(` Centered with `),t(`code`,null,`.justify-content-center`),e(`: `)],-1),a(m,{href:`components/nav.html#horizontal-alignment`},{default:i(()=>[a(p,{class:`justify-content-center`},{default:i(()=>[a(f,null,{default:i(()=>[a(d,{href:`#`,active:``},{default:i(()=>[...c[12]||=[e(` Active `,-1)]]),_:1})]),_:1}),a(f,null,{default:i(()=>[a(d,{href:`#`},{default:i(()=>[...c[13]||=[e(`Link`,-1)]]),_:1})]),_:1}),a(f,null,{default:i(()=>[a(d,{href:`#`},{default:i(()=>[...c[14]||=[e(`Link`,-1)]]),_:1})]),_:1}),a(f,null,{default:i(()=>[a(d,{href:`#`,disabled:``},{default:i(()=>[...c[15]||=[e(` Disabled `,-1)]]),_:1})]),_:1})]),_:1})]),_:1}),c[22]||=t(`p`,{class:`text-body-secondary small`},[e(` Right-aligned with `),t(`code`,null,`.justify-content-end`),e(`: `)],-1),a(m,{href:`components/nav.html#base-nav`},{default:i(()=>[a(p,{class:`justify-content-end`},{default:i(()=>[a(f,null,{default:i(()=>[a(d,{href:`#`,active:``},{default:i(()=>[...c[16]||=[e(` Active `,-1)]]),_:1})]),_:1}),a(f,null,{default:i(()=>[a(d,{href:`#`},{default:i(()=>[...c[17]||=[e(`Link`,-1)]]),_:1})]),_:1}),a(f,null,{default:i(()=>[a(d,{href:`#`},{default:i(()=>[...c[18]||=[e(`Link`,-1)]]),_:1})]),_:1}),a(f,null,{default:i(()=>[a(d,{href:`#`,disabled:``},{default:i(()=>[...c[19]||=[e(` Disabled `,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),a(_,{xs:12},{default:i(()=>[a(g,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[23]||=[t(`strong`,null,`Vue Navs`,-1),e(),t(`small`,null,`Vertical`,-1)]]),_:1}),a(h,null,{default:i(()=>[c[28]||=t(`p`,{class:`text-body-secondary small`},[e(` Stack your navigation by changing the flex item direction with the{' '} `),t(`code`,null,`.flex-column`),e(` utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., `),t(`code`,null,`.flex-sm-column`),e(`). `)],-1),a(m,{href:`components/nav.html#vertical`},{default:i(()=>[a(p,{class:`flex-column`},{default:i(()=>[a(f,null,{default:i(()=>[a(d,{href:`#`,active:``},{default:i(()=>[...c[24]||=[e(` Active `,-1)]]),_:1})]),_:1}),a(f,null,{default:i(()=>[a(d,{href:`#`},{default:i(()=>[...c[25]||=[e(`Link`,-1)]]),_:1})]),_:1}),a(f,null,{default:i(()=>[a(d,{href:`#`},{default:i(()=>[...c[26]||=[e(`Link`,-1)]]),_:1})]),_:1}),a(f,null,{default:i(()=>[a(d,{href:`#`,disabled:``},{default:i(()=>[...c[27]||=[e(` Disabled `,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),a(_,{xs:12},{default:i(()=>[a(g,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[29]||=[t(`strong`,null,`Vue Navs`,-1),e(),t(`small`,null,`Tabs`,-1)]]),_:1}),a(h,null,{default:i(()=>[c[34]||=t(`p`,{class:`text-body-secondary small`},[e(` Takes the basic nav from above and adds the `),t(`code`,null,`variant="tabs"`),e(` class to generate a tabbed interface `)],-1),a(m,{href:`components/nav.html#tabs`},{default:i(()=>[a(p,{variant:`tabs`},{default:i(()=>[a(f,null,{default:i(()=>[a(d,{href:`#`,active:``},{default:i(()=>[...c[30]||=[e(` Active `,-1)]]),_:1})]),_:1}),a(f,null,{default:i(()=>[a(d,{href:`#`},{default:i(()=>[...c[31]||=[e(`Link`,-1)]]),_:1})]),_:1}),a(f,null,{default:i(()=>[a(d,{href:`#`},{default:i(()=>[...c[32]||=[e(`Link`,-1)]]),_:1})]),_:1}),a(f,null,{default:i(()=>[a(d,{href:`#`,disabled:``},{default:i(()=>[...c[33]||=[e(` Disabled `,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),a(_,{xs:12},{default:i(()=>[a(g,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[35]||=[t(`strong`,null,`Vue Navs`,-1),e(),t(`small`,null,`Pills`,-1)]]),_:1}),a(h,null,{default:i(()=>[c[40]||=t(`p`,{class:`text-body-secondary small`},[e(` Take that same HTML, but use `),t(`code`,null,`variant="pills"`),e(` instead: `)],-1),a(m,{href:`components/nav.html#pills`},{default:i(()=>[a(p,{variant:`pills`},{default:i(()=>[a(f,null,{default:i(()=>[a(d,{href:`#`,active:``},{default:i(()=>[...c[36]||=[e(` Active `,-1)]]),_:1})]),_:1}),a(f,null,{default:i(()=>[a(d,{href:`#`},{default:i(()=>[...c[37]||=[e(`Link`,-1)]]),_:1})]),_:1}),a(f,null,{default:i(()=>[a(d,{href:`#`},{default:i(()=>[...c[38]||=[e(`Link`,-1)]]),_:1})]),_:1}),a(f,null,{default:i(()=>[a(d,{href:`#`,disabled:``},{default:i(()=>[...c[39]||=[e(` Disabled `,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),a(_,{xs:12},{default:i(()=>[a(g,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[41]||=[t(`strong`,null,`Vue Navs`,-1),e(),t(`small`,null,`Fill and justify`,-1)]]),_:1}),a(h,null,{default:i(()=>[c[50]||=t(`p`,{class:`text-body-secondary small`},[e(` Force your `),t(`code`,null,`.nav`),e(`'s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `),t(`code`,null,`.nav-item`),e(`s, use `),t(`code`,null,`layout="fill"`),e(`. Notice that all horizontal space is occupied, but not every nav item has the same width. `)],-1),a(m,{href:`components/nav.html#fill-and-justify`},{default:i(()=>[a(p,{variant:`pills`,layout:`fill`},{default:i(()=>[a(f,null,{default:i(()=>[a(d,{href:`#`,active:``},{default:i(()=>[...c[42]||=[e(` Active `,-1)]]),_:1})]),_:1}),a(f,null,{default:i(()=>[a(d,{href:`#`},{default:i(()=>[...c[43]||=[e(`Link`,-1)]]),_:1})]),_:1}),a(f,null,{default:i(()=>[a(d,{href:`#`},{default:i(()=>[...c[44]||=[e(`Link`,-1)]]),_:1})]),_:1}),a(f,null,{default:i(()=>[a(d,{href:`#`,disabled:``},{default:i(()=>[...c[45]||=[e(` Disabled `,-1)]]),_:1})]),_:1})]),_:1})]),_:1}),c[51]||=t(`p`,{class:`text-body-secondary small`},[e(` For equal-width elements, use `),t(`code`,null,`layout="justified"`),e(`. All horizontal space will be occupied by nav links, but unlike the .nav-fill above, every nav item will be the same width. `)],-1),a(m,{href:`components/nav.html#fill-and-justify`},{default:i(()=>[a(p,{variant:`pills`,layout:`justified`},{default:i(()=>[a(f,null,{default:i(()=>[a(d,{href:`#`,active:``},{default:i(()=>[...c[46]||=[e(` Active `,-1)]]),_:1})]),_:1}),a(f,null,{default:i(()=>[a(d,{href:`#`},{default:i(()=>[...c[47]||=[e(`Link`,-1)]]),_:1})]),_:1}),a(f,null,{default:i(()=>[a(d,{href:`#`},{default:i(()=>[...c[48]||=[e(`Link`,-1)]]),_:1})]),_:1}),a(f,null,{default:i(()=>[a(d,{href:`#`,disabled:``},{default:i(()=>[...c[49]||=[e(` Disabled `,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),a(_,{xs:12},{default:i(()=>[a(g,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[52]||=[t(`strong`,null,`Vue Navs`,-1),e(),t(`small`,null,`Working with flex utilities`,-1)]]),_:1}),a(h,null,{default:i(()=>[c[57]||=t(`p`,{class:`text-body-secondary small`},[e(` If you need responsive nav variations, consider using a series of{' '} `),t(`a`,{href:`https://coreui.io/docs/utilities/flex`},`flexbox utilities`),e(`. While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint. `)],-1),a(m,{href:`components/nav.html#working-with-flex-utilities`},{default:i(()=>[a(p,{as:`nav`,variant:`pills`,class:`flex-column flex-sm-row`},{default:i(()=>[a(d,{href:`#`,active:``},{default:i(()=>[...c[53]||=[e(` Active `,-1)]]),_:1}),a(d,{href:`#`},{default:i(()=>[...c[54]||=[e(`Link`,-1)]]),_:1}),a(d,{href:`#`},{default:i(()=>[...c[55]||=[e(`Link`,-1)]]),_:1}),a(d,{href:`#`,disabled:``},{default:i(()=>[...c[56]||=[e(` Disabled `,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),a(_,{xs:12},{default:i(()=>[a(g,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[58]||=[t(`strong`,null,`Vue Navs`,-1),e(),t(`small`,null,`Tabs with dropdowns`,-1)]]),_:1}),a(h,null,{default:i(()=>[a(m,{href:`components/nav.html#tabs-with-dropdowns`},{default:i(()=>[a(p,null,{default:i(()=>[a(f,null,{default:i(()=>[a(d,{href:`#`,active:``},{default:i(()=>[...c[59]||=[e(` Active `,-1)]]),_:1})]),_:1}),a(x,{variant:`nav-item`},{default:i(()=>[a(v,{color:`secondary`},{default:i(()=>[...c[60]||=[e(`Dropdown button`,-1)]]),_:1}),a(b,null,{default:i(()=>[a(y,{href:`#`},{default:i(()=>[...c[61]||=[e(`Action`,-1)]]),_:1}),a(y,{href:`#`},{default:i(()=>[...c[62]||=[e(`Another action`,-1)]]),_:1}),a(y,{href:`#`},{default:i(()=>[...c[63]||=[e(`Something else here`,-1)]]),_:1})]),_:1})]),_:1}),a(f,null,{default:i(()=>[a(d,{href:`#`},{default:i(()=>[...c[64]||=[e(`Link`,-1)]]),_:1})]),_:1}),a(f,null,{default:i(()=>[a(d,{href:`#`,disabled:``},{default:i(()=>[...c[65]||=[e(` Disabled `,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1}),a(_,{xs:12},{default:i(()=>[a(g,{class:`mb-4`},{default:i(()=>[a(u,null,{default:i(()=>[...c[66]||=[t(`strong`,null,`Vue Navs`,-1),e(),t(`small`,null,`Pills with dropdowns`,-1)]]),_:1}),a(h,null,{default:i(()=>[a(m,{href:`components/nav.html#pills-with-dropdowns`},{default:i(()=>[a(p,{variant:`pills`},{default:i(()=>[a(f,null,{default:i(()=>[a(d,{href:`#`,active:``},{default:i(()=>[...c[67]||=[e(` Active `,-1)]]),_:1})]),_:1}),a(x,{variant:`nav-item`},{default:i(()=>[a(v,{color:`secondary`},{default:i(()=>[...c[68]||=[e(`Dropdown button`,-1)]]),_:1}),a(b,null,{default:i(()=>[a(y,{href:`#`},{default:i(()=>[...c[69]||=[e(`Action`,-1)]]),_:1}),a(y,{href:`#`},{default:i(()=>[...c[70]||=[e(`Another action`,-1)]]),_:1}),a(y,{href:`#`},{default:i(()=>[...c[71]||=[e(`Something else here`,-1)]]),_:1})]),_:1})]),_:1}),a(f,null,{default:i(()=>[a(d,{href:`#`},{default:i(()=>[...c[72]||=[e(`Link`,-1)]]),_:1})]),_:1}),a(f,null,{default:i(()=>[a(d,{href:`#`,disabled:``},{default:i(()=>[...c[73]||=[e(` Disabled `,-1)]]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})]),_:1})}var u=r(c,[[`render`,l]]);export{u as default};