@bentoproject/sidebar
Advanced tools
Provides a way to display meta content intended for temporary access such as navigation, links, buttons, menus.
Provides a way to display meta content intended for temporary access such as navigation, links, buttons, menus. The sidebar can be revealed by a button tap while the main content remains visually underneath.
You must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See Layout and style.
npm install @bentoproject/sidebar
import {defineElement as defineBentoSidebar} from '@bentoproject/sidebar';
defineBentoSidebar();
<script><script type="module" src="https://cdn.ampproject.org/bento.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/bento.js" crossorigin="anonymous"></script>
<script type="module" src="https://cdn.ampproject.org/v0/bento-sidebar-1.0.mjs" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.ampproject.org/v0/bento-sidebar-1.0.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/bento-sidebar-1.0.css" crossorigin="anonymous">
<!DOCTYPE html>
<html>
<head>
<script
type="module"
async
src="https://cdn.ampproject.org/bento.mjs"
></script>
<script nomodule src="https://cdn.ampproject.org/bento.js"></script>
<script
type="module"
async
src="https://cdn.ampproject.org/v0/bento-sidebar-1.0.mjs"
></script>
<script
nomodule
async
src="https://cdn.ampproject.org/v0/bento-sidebar-1.0.js"
></script>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.ampproject.org/v0/bento-sidebar-1.0.css"
/>
</head>
<body>
<bento-sidebar id="sidebar1" side="right" hidden>
<ul>
<li>Nav item 1</li>
<li>Nav item 2</li>
<li>Nav item 3</li>
<li>Nav item 4</li>
<li>Nav item 5</li>
<li>Nav item 6</li>
</ul>
</bento-sidebar>
<div class="buttons" style="margin-top: 8px">
<button id="open-sidebar">Open sidebar</button>
</div>
<script>
(async () => {
const sidebar = document.querySelector('#sidebar1');
await customElements.whenDefined('bento-sidebar');
const api = await sidebar.getApi();
// set up button actions
document.querySelector('#open-sidebar').onclick = () => api.open();
})();
</script>
</body>
</html>
Bento components are highly interactive through their API. The bento-sidebar component API is accessible by including the following script tag in your document:
await customElements.whenDefined('bento-sidebar');
const api = await carousel.getApi();
The bento-sidebar API allows you to perform the following actions:
Opens the sidebar.
api.open();
Closes the sidebar.
api.close();
Toggles the sidebar open state.
api.toggle(0);
Each Bento component has a small CSS library you must include to guarantee proper loading without content shifts. Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.
<link
rel="stylesheet"
type="text/css"
href="https://cdn.ampproject.org/v0/bento-sidebar-1.0.css"
/>
Alternatively, you may also make the light-weight pre-upgrade styles available inline:
<style>
bento-sidebar:not([open]) {
display: none !important;
}
</style>
The bento-sidebar component can be styled with standard CSS.
width of the bento-sidebar may be set to adjust the width from the pre-set 45px value.bento-sidebar may be set to adjust the height of the sidebar, if required. If the height exceeds 100vw, the sidebar will have a vertical scrollbar. The preset height of the sidebar is 100vw and can be overridden in CSS to make it shorter.open attribute that is set on the bento-sidebar tag when the side bar is open on the page.bento-sidebar[open] {
height: 100%;
width: 50px;
}
When using <bento-sidebar>, keep in mind that your users will often view your page on mobile, which may display a fixed-position header. In addition, browsers often display their own fixed header at the top of the page. Adding another fixed-position element at the top of the screen would take up a large amount of mobile screen space with content that gives the user no new information.
For this reason, we recommend that affordances to open the sidebar are not placed in a fixed, full-width header.
<bento-sidebar> is recommended to be be a direct child of the <body> to preserve a logical DOM order for accessibility as well as to avoid altering its behavior by a container element. Note that having an ancestor of bento-sidebar with a set z-index may cause the sidebar to appear below other elements (such as headers), breaking its functionality.Indicates what side of the page the sidebar should open from, either left or right. If a side is not specified, the side value will be inherited from the body tag's dir attribute (ltr => left , rtl => right); if no dir exists, the side defaults to left.
This attribute is present when the sidebar is open.
npm install @bentoproject/sidebar
import React from 'react';
import {BentoSidebar} from '@bentoproject/sidebar/react';
import '@bentoproject/sidebar/styles.css';
function App() {
return (
<BentoSidebar>
<ul>
<li>Nav item 1</li>
<li>Nav item 2</li>
<li>Nav item 3</li>
<li>Nav item 4</li>
<li>Nav item 5</li>
<li>Nav item 6</li>
</ul>
</BentoSidebar>
);
}
Bento components are highly interactive through their API. The BentoSidebar component API is accessible by passing a ref:
import React, {createRef} from 'react';
const ref = createRef();
function App() {
return (
<BentoSidebar ref={ref}>
<ul>
<li>Nav item 1</li>
<li>Nav item 2</li>
<li>Nav item 3</li>
<li>Nav item 4</li>
<li>Nav item 5</li>
<li>Nav item 6</li>
</ul>
</BentoSidebar>
);
}
The BentoSidebar API allows you to perform the following actions:
Opens the sidebar.
ref.current.open();
Closes the sidebar.
ref.current.close();
Toggles the sidebar open state.
ref.current.toggle(0);
The BentoSidebar component can be styled with standard CSS.
width of the bento-sidebar may be set to adjust the width from the preset 45px value.bento-sidebar may be set to adjust the height of the sidebar, if required. If the height exceeds 100vw, the sidebar will have a vertical scrollbar. The preset height of the sidebar is 100vw and can be overridden in CSS to make it shorter.To ensure the component renders how you want it to, be sure to apply a size to the component. These can be applied inline:
<BentoSidebar style={{width: 300, height: '100%'}}>
<ul>
<li>Nav item 1</li>
<li>Nav item 2</li>
<li>Nav item 3</li>
<li>Nav item 4</li>
<li>Nav item 5</li>
<li>Nav item 6</li>
</ul>
</BentoSidebar>
Or via className:
<BentoSidebar className="custom-styles">
<ul>
<li>Nav item 1</li>
<li>Nav item 2</li>
<li>Nav item 3</li>
<li>Nav item 4</li>
<li>Nav item 5</li>
<li>Nav item 6</li>
</ul>
</BentoSidebar>
.custom-styles {
height: 100%;
width: 300px;
}
When using <BentoSidebar>, keep in mind that your users will often view your page on mobile, which may display a fixed-position header. In addition, browsers often display their own fixed header at the top of the page. Adding another fixed-position element at the top of the screen would take up a large amount of mobile screen space with content that gives the user no new information.
For this reason, we recommend that affordances to open the sidebar are not placed in a fixed, full-width header.
<BentoSidebar> is recommended to be be a direct child of the <body> to preserve a logical DOM order for accessibility as well as to avoid altering its behavior by a container element. Note that having an ancestor of BentoSidebar with a set z-index may cause the sidebar to appear below other elements (such as headers), breaking its functionality.Indicates what side of the page the sidebar should open from, either left or right. If a side is not specified, the side value will be inherited from the body tag's dir attribute (ltr => left , rtl => right); if no dir exists, the side defaults to left.
FAQs
Provides a way to display meta content intended for temporary access such as navigation, links, buttons, menus.
We found that @bentoproject/sidebar demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.