Skip to content

Commit 87e4450

Browse files
mrholekmrholek
committed
docs(CNavbar): add external content, and offcanvas examples
1 parent cb137c6 commit 87e4450

File tree

1 file changed

+162
-1
lines changed

1 file changed

+162
-1
lines changed

‎packages/docs/components/navbar.md

Lines changed: 162 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -945,7 +945,7 @@ With a toggler on the left and brand name on the right:
945945
</CContainer>
946946
</CNavbar>
947947
:::
948-
```vue {() => {
948+
```vue
949949
<CNavbar expand="lg" color-scheme="light" class="bg-light">
950950
<CContainer fluid>
951951
<CNavbarToggler aria-label="Toggle navigation" aria-expanded={visible} @click="visible = !visible"/>
@@ -975,11 +975,172 @@ With a toggler on the left and brand name on the right:
975975
</CNavbar>
976976
```
977977

978+
### External content
979+
980+
Sometimes you want to use the collapse plugin to trigger a container element for content that structurally sits outside of the `<CNavbar>`.
981+
982+
::: demo
983+
<CCollapse id="navbarToggleExternalContent" :visible="visibleExternalContent">
984+
<div class="bg-dark p-4">
985+
<h5 class="text-white h4">Collapsed content</h5>
986+
<span class="text-medium-emphasis-inverse">Toggleable via the navbar brand.</span>
987+
</div>
988+
</CCollapse>
989+
<CNavbar colorScheme="dark" class="bg-dark">
990+
<CContainer fluid>
991+
<CNavbarToggler
992+
aria-controls="navbarToggleExternalContent"
993+
aria-label="Toggle navigation"
994+
@click="visibleExternalContent = !visibleExternalContent"
995+
/>
996+
</CContainer>
997+
</CNavbar>
998+
:::
999+
```vue
1000+
<template>
1001+
<CCollapse id="navbarToggleExternalContent" :visible="visibleExternalContent">
1002+
<div class="bg-dark p-4">
1003+
<h5 class="text-white h4">Collapsed content</h5>
1004+
<span class="text-medium-emphasis-inverse">Toggleable via the navbar brand.</span>
1005+
</div>
1006+
</CCollapse>
1007+
<CNavbar colorScheme="dark" class="bg-dark">
1008+
<CContainer fluid>
1009+
<CNavbarToggler
1010+
aria-controls="navbarToggleExternalContent"
1011+
aria-label="Toggle navigation"
1012+
@click="visibleExternalContent = !visibleExternalContent"
1013+
/>
1014+
</CContainer>
1015+
</CNavbar>
1016+
</template>
1017+
<script>
1018+
export default {
1019+
data() {
1020+
return {
1021+
visibleExternalContent: false,
1022+
}
1023+
}
1024+
}
1025+
</script>
1026+
```
1027+
1028+
### Offcanvas
1029+
1030+
Transform your expanding and collapsing navbar into an offcanvas drawer with the offcanvas plugin. We extend both the offcanvas default styles and use our `expand="*"` prop to create a dynamic and flexible navigation sidebar.
1031+
1032+
In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the `expand="*"` prop entirely.
1033+
1034+
:::demo
1035+
<CNavbar colorScheme="light" class="bg-light">
1036+
<CContainer fluid>
1037+
<CNavbarToggler
1038+
aria-controls="offcanvasNavbar"
1039+
aria-label="Toggle navigation"
1040+
@click="visibleOffcanvas = !visibleOffcanvas"
1041+
/>
1042+
<COffcanvas id="offcanvasNavbar" placement="end" :visible="visibleOffcanvas" @hide="visibleOffcanvas = false">
1043+
<COffcanvasHeader>
1044+
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
1045+
<CCloseButton class="text-reset" @click="visibleOffcanvas = false" />
1046+
</COffcanvasHeader>
1047+
<COffcanvasBody>
1048+
<CNavbarNav>
1049+
<CNavItem>
1050+
<CNavLink href="#" active>
1051+
Home
1052+
</CNavLink>
1053+
</CNavItem>
1054+
<CNavItem>
1055+
<CNavLink href="#">Link</CNavLink>
1056+
</CNavItem>
1057+
<CDropdown variant="nav-item" :popper="false">
1058+
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
1059+
<CDropdownMenu>
1060+
<CDropdownItem href="#">Action</CDropdownItem>
1061+
<CDropdownItem href="#">Another action</CDropdownItem>
1062+
<CDropdownDivider />
1063+
<CDropdownItem href="#">Something else here</CDropdownItem>
1064+
</CDropdownMenu>
1065+
</CDropdown>
1066+
<CNavItem>
1067+
<CNavLink href="#" disabled>
1068+
Disabled
1069+
</CNavLink>
1070+
</CNavItem>
1071+
</CNavbarNav>
1072+
<CForm class="d-flex">
1073+
<CFormInput type="search" class="me-2" placeholder="Search" />
1074+
<CButton type="submit" color="success" variant="outline">
1075+
Search
1076+
</CButton>
1077+
</CForm>
1078+
</COffcanvasBody>
1079+
</COffcanvas>
1080+
</CContainer>
1081+
</CNavbar>
1082+
:::
1083+
1084+
To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like `xxl`, use `expand="xxl"` property.
1085+
1086+
:::demo
1087+
<CNavbar colorScheme="light" class="bg-light" expand="xxl">
1088+
<CContainer fluid>
1089+
<CNavbarToggler
1090+
aria-controls="offcanvasNavbar2"
1091+
aria-label="Toggle navigation"
1092+
@click="visibleOffcanvas2 = !visibleOffcanvas2"
1093+
/>
1094+
<COffcanvas id="offcanvasNavbar2" placement="end" :visible="visibleOffcanvas2" @hide="visibleOffcanvas2 = false">
1095+
<COffcanvasHeader>
1096+
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
1097+
<CCloseButton class="text-reset" @click="visibleOffcanvas2 = false" />
1098+
</COffcanvasHeader>
1099+
<COffcanvasBody>
1100+
<CNavbarNav>
1101+
<CNavItem>
1102+
<CNavLink href="#" active>
1103+
Home
1104+
</CNavLink>
1105+
</CNavItem>
1106+
<CNavItem>
1107+
<CNavLink href="#">Link</CNavLink>
1108+
</CNavItem>
1109+
<CDropdown variant="nav-item" :popper="false">
1110+
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
1111+
<CDropdownMenu>
1112+
<CDropdownItem href="#">Action</CDropdownItem>
1113+
<CDropdownItem href="#">Another action</CDropdownItem>
1114+
<CDropdownDivider />
1115+
<CDropdownItem href="#">Something else here</CDropdownItem>
1116+
</CDropdownMenu>
1117+
</CDropdown>
1118+
<CNavItem>
1119+
<CNavLink href="#" disabled>
1120+
Disabled
1121+
</CNavLink>
1122+
</CNavItem>
1123+
</CNavbarNav>
1124+
<CForm class="d-flex">
1125+
<CFormInput type="search" class="me-2" placeholder="Search" />
1126+
<CButton type="submit" color="success" variant="outline">
1127+
Search
1128+
</CButton>
1129+
</CForm>
1130+
</COffcanvasBody>
1131+
</COffcanvas>
1132+
</CContainer>
1133+
</CNavbar>
1134+
:::
1135+
9781136
<script>
9791137
export default {
9801138
data() {
9811139
return {
9821140
visible: true,
1141+
visibleExternalContent: false,
1142+
visibleOffcanvas: false,
1143+
visibleOffcanvas2: false,
9831144
}
9841145
}
9851146
}

0 commit comments

Comments
 (0)