docs: clean up docs to match main projects and link to new examples

README.md

@@ -16,183 +16,45 @@ The supported menu types are:
 - [Navigation Menubar](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/), and
 - [Navigation Treeview](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-navigation/)
 
-## Browser Support
+## Getting Started
 
-| <img src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome.svg" role="presentation" width="32px" height="32px" /><br />Chrome | <img src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/firefox/firefox.svg" role="presentation" width="32px" height="32px" /><br />Firefox | <img src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/safari/safari_32x32.png" role="presentation" width="32px" height="32px" /><br />Safari  | <img src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/edge/edge.svg" role="presentation" width="32px" height="32px" /><br />Edge | <img src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/chromium/chromium.svg" role="presentation" width="32px" height="32px" /><br />Chromium | <img src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/webkit/webkit.svg" role="presentation" width="32px" height="32px" /><br />Webkit |
-| --- | --- | --- | --- | --- | --- |
-| last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+Please follow the main project's [documentation](https://accessible-menu.dev/).
 
-Found something that doesn't work the way it should in one of the listed browsers above? [Open an issue](https://github.com/NickDJM/accessible-menu-bootstrap-5/issues/new?assignees=&labels=bug&template=bug_report.md&title=Bug%3A+%5BBrief+Description%5D)!
+### Installation
 
-## Installation
+You can install Accessible Menu Bootstrap 5 into your project using NPM.
 
-### NPM
-
-NPM is recommended for large-scale development, since it works well with bundlers like [Webpack](https://webpack.js.org/) or [Rollup](https://rollupjs.org/guide/en/).
-
-```shell
+```bash
 # latest stable
 npm install accessible-menu-bootstrap-5
 ```
 
-### CDN
-
-For learning/prototyping purposes you can use the latest version with:
-
-```html
-<script src="https://cdn.jsdelivr.net/npm/accessible-menu-bootstrap-5/dist/accessible-menu-bs5.js"></script>
-```
-
-For production environments, it is recommend to use a specific version to avoid unforseen breaking changes:
-
-```html
-<script src="https://cdn.jsdelivr.net/npm/accessible-menu-bootstrap-5@2.0.0-beta.3/dist/accessible-menu-bs5.min.js"></script>
-```
-
-## Usage
-
-To use **accessible-menu-bootstrap-5**, you first need to make sure your menu matches the following structure:
-
-```html
-<ul id="example-menu" class="navbar-nav">
-  <li class="nav-item"><a href="/about" class="nav-link">About</a></li>
-  <li class="nav-item dropdown">
-    <a href="#" class="nav-link dropdown-toggle">Projects ▼</a>
-    <ul class="dropdown-menu">
-      <li class="nav-item"><a href="/projects/awesome" class="dropdown-item">Awesome project</a></li>
-      <li class="nav-item"><a href="/projects/not-so-awesome" class="dropdown-item">Not-so-awesome project</a></li>
-    </ul>
-  </li>
-  <li class="nav-item"><a href="/contact" class="nav-link">Contact me</a></li>
-</ul>
-```
-
-Include **accessible-menu-bootstrap-5** through import or bundled library in your project:
-
-```js
-import AccessibleMenu from "accessible-menu-bootstrap-5";
-```
-
-or
-
-```html
-<script src="https://cdn.jsdelivr.net/npm/accessible-menu-bootstrap-5@2.0.0-beta.3/dist/accessible-menu-bs5.min.js"></script>
-```
-
-Once you have **accessible-menu-bootstrap-5** loaded, declare a new menu object.
-
-`menuElement` is required for all menus. Unlike accessible-menu, **accessible-menu-bootstrap-5** will automatically find dropdown menus since the classes `.dropdown`, `.dropdown-menu`, and `.dropdown-item` are included in the Bootstrap 5 framework.
-
-```js
-const menu = new AccessibleMenu.DisclosureMenu({
-  menuElement: document.querySelector("#example-menu"),
-});
-```
-
-### Only need one type of menu class?
-
-Bundled versions of each menu are provided in the dist and individual exports are provided in the index.
-
-There are also compiled ES Module versions if you don't want to use an iife!
-
-#### Bootstrap5DisclosureMenu usage
-
-```js
-import { Bootstrap5DisclosureMenu } from "accessible-menu-bootstrap-5";
-```
-
-or
-
-```html
-<script src="https://cdn.jsdelivr.net/npm/accessible-menu-bootstrap-5@2.0.0-beta.3/dist/disclosure-menu-bs5.min.js"></script>
-```
-
-then
-
-```js
-const menu = new Bootstrap5DisclosureMenu({
-  menuElement: document.querySelector("#example-menu"),
-});
-```
-
-#### Bootstrap5Menubar usage
+### Using Accessible Menu from a CDN
 
-```js
-import { Bootstrap5Menubar } from "accessible-menu-bootstrap-5";
-```
-
-or
-
-```html
-<script src="https://cdn.jsdelivr.net/npm/accessible-menu-bootstrap-5@2.0.0-beta.3/dist/menubar-bs5.min.js"></script>
-```
-
-then
-
-```js
-const menu = new Bootstrap5Menubar({
-  menuElement: document.querySelector("#example-menu"),
-});
-```
-
-#### Bootstrap5TopLinkDisclosureMenu usage
-
-```js
-import { Bootstrap5TopLinkDisclosureMenu } from "accessible-menu";
-```
-
-or
-
-```html
-<script src="https://cdn.jsdelivr.net/npm/accessible-menu@4.0.0-beta.0/dist/top-link-disclosure-menu-bs5.min.js"></script>
-```
-
-then
-
-```js
-const menu = new Bootstrap5TopLinkDisclosureMenu({
-  menuElement: document.querySelector("#example-menu"),
-});
-```
-
-#### Bootstrap5Treeview usage
-
-```js
-import { Bootstrap5Treeview } from "accessible-menu-bootstrap-5";
-```
-
-or
+You can use Accessible Menu Bootstrap 5 directly from a CDN via a script tag.
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/accessible-menu-bootstrap-5@2.0.0-beta.3/dist/treeview-bs5.min.js"></script>
-```
-
-then
-
-```js
-const menu = new Bootstrap5Treeview({
-  menuElement: document.querySelector("#example-menu"),
-});
+<script src="https://cdn.jsdelivr.net/npm/accessible-menu-bootstrap-5/dist/accessible-menu-bs5.iife.js"></script>
 ```
 
-### Documentation
+We use [jsdelivr](https://www.jsdelivr.com/package/npm/accessible-menu-bootstrap-5) as the example, but you can use any cdn you prefer, such as [unpkg](https://unpkg.com). You can also download the files listed in the CDN and host them yourself if preferred.
 
-- [accessible-menu API Documentation](https://accessible-menu.netlify.app/)
-- Basics
-  - [Single-level menu](docs/basics/single-level-menu.md)
-  - [Single-level menu with toggle](docs/basics/single-level-menu-with-toggle.md)
-  - [Two-level menu with toggle](docs/basics/two-level-menu-with-toggle.md)
-- [Live examples](https://mandrasch.github.io/accessible-menu-bootstrap-examples/)
+## Examples
 
-### Conflict with Bootstrap's own navbar toggle
+The following codepens are available as examples of how to use `accessible-menu`:
 
-Bootstrap 5 has it's own implementation of expanding/collapsing menus using the `data-bs-toggle` attribute on navbar togglers and dropdown toggles which would cause both **accessible-menu-bootstrap-5** _and_ Bootstrap's own toggler to open/close menus at the same time. To resolve this issue, **accessible-menu-bootstrap-5** removed the `data-bs-toggle` attributes from menu toggles that it controls.
+- [Disclosure Navigation Menu](https://codepen.io/nickdjm/pen/MWRaEoV)
+- [Disclosure Navigation Menu with Top-Level Links](https://codepen.io/nickdjm/pen/XWQmezx)
+- [Navigation Menubar](https://codepen.io/nickdjm/pen/YzMyraX)
+- [Navigation Treeview](https://codepen.io/nickdjm/pen/zYXvEWy)
 
-### Other versions of Bootstrap
-
-This project isn't designed to work with other versions of Bootstrap other than v4, however you _could_ probably get it to work with Bootstrap 3 by customizing the selectors and open/close classes when declaring the menu.
+## Sponsors
 
-You also _might_ be able to get this to work with Bootstrap 5, however v5 changed the `data-bs-toggle` value on dropdowns to `data-bs-toggle` which won't be handled by this project. A Bootstrap 5 specific project may be created if there is enough interest in it.
+<p align="center">
+  <a href="https://coldfrontlabs.ca">
+    <img src="https://coldfrontlabs.ca/themes/custom/frosty/images/coldfrontlabs-flakkon-logo.png" alt="Coldfront Labs Inc." width="300px"/>
+  </a>
+</p>
 
 ## Versioning
 
@@ -203,11 +65,3 @@ For more detailed information about SemVer, please see the [official documentati
 ## Contributing
 
 If you're interested in contributing to the project, please read the [Contribution Guidelines](.github/CONTRIBUTING.md). Any and all contributions _must_ follow these guidelines or they will not be accepted.
-
-## Sponsors
-
-<p align="center">
-  <a href="https://coldfrontlabs.ca">
-    <img src="https://coldfrontlabs.ca/themes/custom/frosty/images/coldfrontlabs-flakkon-logo.png" alt="Coldfront Labs Inc." width="300px"/>
-  </a>
-</p>

index.html

@@ -14,10 +14,10 @@
       <div class="row gap-3">
         <div class="col-12">
           <h1>Hello Accessible Menu!</h1>
-          <p>This is a demo and manual testing application for <a href="https://github.com/NickDJM/accessible-menu" target="_blank">accessible-menu</a>.</p>
+          <p>This is a demo and manual testing application for <a href="https://github.com/NickDJM/accessible-menu-bootstrap-5" target="_blank">accessible-menu-bootstrap-5</a>.</p>
           <p>This app allows you to swamp between one, two, and three levels of navigation for all supported types of menus provided by accessible-menu.</p>
           <p>You can also swap between light and dark mode for ease of use on you if you find white screens too bright.</p>
-          <p>For more in-depth information about how accessible-menu works, please read <a href="https://accessible-menu.netlify.app/" target="_blank">the documentation</a>.</p>
+          <p>For more in-depth information about how accessible-menu works, please read <a href="https://accessible-menu.dev" target="_blank">the documentation</a>.</p>
         </div>
         <section aria-labelledby="themeSettings" class="col-12">
           <h2 id="themeSettings">Theme Settings</h2>