diff --git a/docs/src/components/sidebar.njk b/docs/src/components/sidebar.njk
index 46cdb25..2e209c5 100644
--- a/docs/src/components/sidebar.njk
+++ b/docs/src/components/sidebar.njk
@@ -83,23 +83,14 @@ toc:
 {{ code_block(code_html | prettyHtml, "html") }}
 
 <section class="prose">
-  <p>To use a sidebar, you will need the sidebar itself and a sibling container for the content of the page (e.g. <code>&lt;main&gt;</code>), with the following structure for the sidebar:</p>
-
-  <ul>
-    <li>A <code>&lt;div class="sidebar"&gt;</code> which wraps around the entire component and holds it state (e.g. open/close). It accepts an optional <code>data-side</code> set to <code>left</code>, or <code>right</code> to specify the side of the sidebar (defaults to <code>left</code>).</li>
-    <li>A <code>&lt;nav&gt;</code> that contains the actual sidebar with the following children:
-      <ul>
-        <li>A <code>&lt;header&gt;</code> and <code>&lt;footer&gt;</code> for the header and footer of the sidebar (fixed position).</li>
-        <li>A <code>&lt;section&gt;</code> for the main navigation list. To add links, you <b>must</b> wrap them in a <code>&lt;div role="group"&gt;</code> first. These groups can contain <code>&lt;h3"&gt;</code> for group headings and lists (i.e. <code>&lt;ul&gt;</code>) of links or buttons. You can also use <code>&lt;details&gt;</code> to wrap around collapsbile sections.</li>
-      </ul>
-    </li>
-  </ul>
-
-  <p>Any elememt on the page can toggle, open or close the sidebar by dispatching the <code>basecoat:sidebar</code>, <code>sidebar:open</code> or <code>sidebar:close</code> events.</p>
-
-  <p>You can include the JavaScript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
+  <p>Any element on the page can toggle, open or close the sidebar by dispatching the <code>basecoat:sidebar</code>. By default, the event will toggle the sidebar, but can be used to open or close if you add an <code>action</code> to the detail:</p>
 </section>
 
+{% set code_trigger %}<button type="button" onclick="window.dispatchEvent(new CustomEvent('basecoat:sidebar'));">Toggle sidebar</button>
+<button type="button" onclick="window.dispatchEvent(new CustomEvent('basecoat:sidebar', { detail: { action: 'open' } }));">Open sidebar</button>
+<button type="button" onclick="window.dispatchEvent(new CustomEvent('basecoat:sidebar', { detail: { action: 'close' } }));">Close sidebar</button>{% endset %}
+{{ code_block(code_trigger | prettyHtml, "html") }}
+
 <h4 id="usage-html-js-3"><a href="#usage-html-js-3">HTML structure</a></h4>
 
 <section class="prose">
diff --git a/docs/src/components/toast.njk b/docs/src/components/toast.njk
index 2e0967a..39234e4 100644
--- a/docs/src/components/toast.njk
+++ b/docs/src/components/toast.njk
@@ -95,7 +95,7 @@ toc:
 {{ code_block(code_toaster | prettyHtml, "html") }}
 
 <section class="prose">
-  <p>You can set up the alignment of the toaster using the <code>data-align</code> attribute: <code>start</code>, <code>center</code>, or <code>end</code> (default to <code>end</code>).</p>
+  <p>You can set up the alignment of the toaster using the <code>data-align</code> attribute: <code>data-align="start"</code>, <code>data-align="center"</code>, or <code>data-align="end"</code> (default to <code>data-align="end"</code>).</p>
 </section>
 
 <h4 id="usage-html-js-3"><a href="#usage-html-js-3">Step 3: Add your toasts</a></h4>