Skip to content

Commit 2b97498

Browse files
mrholekmrholek
committed
docs(CNavbar): add offcanvas example
1 parent a182623 commit 2b97498

File tree

1 file changed

+232
-0
lines changed

1 file changed

+232
-0
lines changed

‎packages/docs/content/4.0/components/navbar.mdx‎

Lines changed: 232 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@ import {
3131
CNavbarNav,
3232
CNavbarText,
3333
CNavbarToggler,
34+
COffcanvas,
35+
COffcanvasBody,
36+
COffcanvasHeader,
37+
COffcanvasTitle,
3438
} from '@coreui/react/src/index'
3539

3640
import CoreUISignetImg from './../assets/images/brand/coreui-signet.svg'
@@ -1332,6 +1336,234 @@ return (
13321336
)
13331337
```
13341338

1339+
### Offcanvas
1340+
1341+
Transform your expanding and collapsing navbar into an offcanvas drawer with the offcanvas plugin. We extend both the offcanvas default styles and use our `.navbar-expand-*` classes to create a dynamic and flexible navigation sidebar.
1342+
1343+
In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the `.navbar-expand-*` class entirely.
1344+
1345+
export const OffcanvasExample = () => {
1346+
const [visible, setVisible] = useState(false)
1347+
return (
1348+
<CNavbar colorScheme="light" className="bg-light">
1349+
<CContainer fluid>
1350+
<CNavbarToggler
1351+
aria-controls="offcanvasNavbar"
1352+
aria-label="Toggle navigation"
1353+
onClick={() => setVisible(!visible)}
1354+
/>
1355+
<COffcanvas id="offcanvasNavbar" placement="end" portal={false} visible={visible} onHide={() => setVisible(false)}>
1356+
<COffcanvasHeader>
1357+
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
1358+
<CCloseButton className="text-reset" onClick={() => setVisible(false)} />
1359+
</COffcanvasHeader>
1360+
<COffcanvasBody>
1361+
<CNavbarNav>
1362+
<CNavItem>
1363+
<CNavLink href="#" active>
1364+
Home
1365+
</CNavLink>
1366+
</CNavItem>
1367+
<CNavItem>
1368+
<CNavLink href="#">Link</CNavLink>
1369+
</CNavItem>
1370+
<CDropdown variant="nav-item" popper={false}>
1371+
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
1372+
<CDropdownMenu>
1373+
<CDropdownItem href="#">Action</CDropdownItem>
1374+
<CDropdownItem href="#">Another action</CDropdownItem>
1375+
<CDropdownDivider />
1376+
<CDropdownItem href="#">Something else here</CDropdownItem>
1377+
</CDropdownMenu>
1378+
</CDropdown>
1379+
<CNavItem>
1380+
<CNavLink href="#" disabled>
1381+
Disabled
1382+
</CNavLink>
1383+
</CNavItem>
1384+
</CNavbarNav>
1385+
<CForm className="d-flex">
1386+
<CFormInput type="search" className="me-2" placeholder="Search" />
1387+
<CButton type="submit" color="success" variant="outline">
1388+
Search
1389+
</CButton>
1390+
</CForm>
1391+
</COffcanvasBody>
1392+
</COffcanvas>
1393+
</CContainer>
1394+
</CNavbar>
1395+
)
1396+
}
1397+
1398+
<Example>
1399+
<OffcanvasExample />
1400+
</Example>
1401+
1402+
```jsx
1403+
const [visible, setVisible] = useState(false)
1404+
return (
1405+
<CNavbar colorScheme="light" className="bg-light">
1406+
<CContainer fluid>
1407+
<CNavbarToggler
1408+
aria-controls="offcanvasNavbar"
1409+
aria-label="Toggle navigation"
1410+
onClick={() => setVisible(!visible)}
1411+
/>
1412+
<COffcanvas id="offcanvasNavbar" placement="end" portal={false} visible={visible} onHide={() => setVisible(false)}>
1413+
<COffcanvasHeader>
1414+
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
1415+
<CCloseButton className="text-reset" onClick={() => setVisible(false)} />
1416+
</COffcanvasHeader>
1417+
<COffcanvasBody>
1418+
<CNavbarNav>
1419+
<CNavItem>
1420+
<CNavLink href="#" active>
1421+
Home
1422+
</CNavLink>
1423+
</CNavItem>
1424+
<CNavItem>
1425+
<CNavLink href="#">Link</CNavLink>
1426+
</CNavItem>
1427+
<CDropdown variant="nav-item" popper={false}>
1428+
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
1429+
<CDropdownMenu>
1430+
<CDropdownItem href="#">Action</CDropdownItem>
1431+
<CDropdownItem href="#">Another action</CDropdownItem>
1432+
<CDropdownDivider />
1433+
<CDropdownItem href="#">Something else here</CDropdownItem>
1434+
</CDropdownMenu>
1435+
</CDropdown>
1436+
<CNavItem>
1437+
<CNavLink href="#" disabled>
1438+
Disabled
1439+
</CNavLink>
1440+
</CNavItem>
1441+
</CNavbarNav>
1442+
<CForm className="d-flex">
1443+
<CFormInput type="search" className="me-2" placeholder="Search" />
1444+
<CButton type="submit" color="success" variant="outline">
1445+
Search
1446+
</CButton>
1447+
</CForm>
1448+
</COffcanvasBody>
1449+
</COffcanvas>
1450+
</CContainer>
1451+
</CNavbar>
1452+
)
1453+
```
1454+
1455+
To create an offcanvas navbar that expands into a normal navbar at a specific breakpoint like `xxl`, use `expand="xxl"` property.
1456+
1457+
export const OffcanvasExample2 = () => {
1458+
const [visible, setVisible] = useState(false)
1459+
return (
1460+
<CNavbar colorScheme="light" className="bg-light" expand="xxl">
1461+
<CContainer fluid>
1462+
<CNavbarToggler
1463+
aria-controls="offcanvasNavbar2"
1464+
aria-label="Toggle navigation"
1465+
onClick={() => setVisible(!visible)}
1466+
/>
1467+
<COffcanvas id="offcanvasNavbar2" placement="end" portal={false} visible={visible} onHide={() => setVisible(false)}>
1468+
<COffcanvasHeader>
1469+
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
1470+
<CCloseButton className="text-reset" onClick={() => setVisible(false)} />
1471+
</COffcanvasHeader>
1472+
<COffcanvasBody>
1473+
<CNavbarNav>
1474+
<CNavItem>
1475+
<CNavLink href="#" active>
1476+
Home
1477+
</CNavLink>
1478+
</CNavItem>
1479+
<CNavItem>
1480+
<CNavLink href="#">Link</CNavLink>
1481+
</CNavItem>
1482+
<CDropdown variant="nav-item" popper={false}>
1483+
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
1484+
<CDropdownMenu>
1485+
<CDropdownItem href="#">Action</CDropdownItem>
1486+
<CDropdownItem href="#">Another action</CDropdownItem>
1487+
<CDropdownDivider />
1488+
<CDropdownItem href="#">Something else here</CDropdownItem>
1489+
</CDropdownMenu>
1490+
</CDropdown>
1491+
<CNavItem>
1492+
<CNavLink href="#" disabled>
1493+
Disabled
1494+
</CNavLink>
1495+
</CNavItem>
1496+
</CNavbarNav>
1497+
<CForm className="d-flex">
1498+
<CFormInput type="search" className="me-2" placeholder="Search" />
1499+
<CButton type="submit" color="success" variant="outline">
1500+
Search
1501+
</CButton>
1502+
</CForm>
1503+
</COffcanvasBody>
1504+
</COffcanvas>
1505+
</CContainer>
1506+
</CNavbar>
1507+
)
1508+
}
1509+
1510+
<Example>
1511+
<OffcanvasExample2 />
1512+
</Example>
1513+
1514+
```jsx
1515+
const [visible, setVisible] = useState(false)
1516+
return (
1517+
<CNavbar colorScheme="light" className="bg-light" expand="xxl">
1518+
<CContainer fluid>
1519+
<CNavbarToggler
1520+
aria-controls="offcanvasNavbar2"
1521+
aria-label="Toggle navigation"
1522+
onClick={() => setVisible(!visible)}
1523+
/>
1524+
<COffcanvas id="offcanvasNavbar2" placement="end" portal={false} visible={visible} onHide={() => setVisible(false)}>
1525+
<COffcanvasHeader>
1526+
<COffcanvasTitle>Offcanvas</COffcanvasTitle>
1527+
<CCloseButton className="text-reset" onClick={() => setVisible(false)} />
1528+
</COffcanvasHeader>
1529+
<COffcanvasBody>
1530+
<CNavbarNav>
1531+
<CNavItem>
1532+
<CNavLink href="#" active>
1533+
Home
1534+
</CNavLink>
1535+
</CNavItem>
1536+
<CNavItem>
1537+
<CNavLink href="#">Link</CNavLink>
1538+
</CNavItem>
1539+
<CDropdown variant="nav-item" popper={false}>
1540+
<CDropdownToggle color="secondary">Dropdown button</CDropdownToggle>
1541+
<CDropdownMenu>
1542+
<CDropdownItem href="#">Action</CDropdownItem>
1543+
<CDropdownItem href="#">Another action</CDropdownItem>
1544+
<CDropdownDivider />
1545+
<CDropdownItem href="#">Something else here</CDropdownItem>
1546+
</CDropdownMenu>
1547+
</CDropdown>
1548+
<CNavItem>
1549+
<CNavLink href="#" disabled>
1550+
Disabled
1551+
</CNavLink>
1552+
</CNavItem>
1553+
</CNavbarNav>
1554+
<CForm className="d-flex">
1555+
<CFormInput type="search" className="me-2" placeholder="Search" />
1556+
<CButton type="submit" color="success" variant="outline">
1557+
Search
1558+
</CButton>
1559+
</CForm>
1560+
</COffcanvasBody>
1561+
</COffcanvas>
1562+
</CContainer>
1563+
</CNavbar>
1564+
)
1565+
```
1566+
13351567
## API
13361568

13371569
### CNavbar

0 commit comments

Comments
 (0)