Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 2b97498

Browse filesBrowse files
mrholekmrholek
committed
docs(CNavbar): add offcanvas example
1 parent a182623 commit 2b97498
Copy full SHA for 2b97498

File tree

Expand file treeCollapse file tree

1 file changed

+232
-0
lines changed
Filter options
Expand file treeCollapse file tree

1 file changed

+232
-0
lines changed

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

Copy file name to clipboardExpand all lines: packages/docs/content/4.0/components/navbar.mdx
+232Lines 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 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.