EDGE

Author: simonhamp

public/img/docs/edge-bottom-nav-android.png

@@ -301,3 +301,11 @@ nav.docs-navigation > ul > li > ul {
 .prose aside {
     @apply relative z-0 mt-5 overflow-hidden rounded-2xl bg-gradient-to-tl from-transparent to-violet-100/75 px-5 ring-1 ring-black/5 dark:from-slate-900/30 dark:to-indigo-900/35;
 }
+
+.images-two-up {
+    @apply grid gap-8 mt-0 items-center;
+
+    @variant sm {
+        @apply grid-cols-2;
+    }
+}

public/img/docs/edge-bottom-nav-ios.png

@@ -5,42 +5,63 @@ order: 100
 
 ## Overview
 
-A bottom navigation bar with up to 5 items for primary navigation.
+<div class="images-two-up not-prose">
+
+![](/img/docs/edge-bottom-nav-ios.png)
+
+![](/img/docs/edge-bottom-nav-android.png)
+
+</div>
+
+A bottom navigation bar with up to 5 items. Used for your app's primary navigation.
 
 @verbatim
 ```blade
-<x-native:bottom-nav label-visibility="labeled">
-    <x-native:bottom-nav-item
+<native:bottom-nav label-visibility="labeled">
+    <native:bottom-nav-item
         id="home"
         icon="home"
         label="Home"
         url="/home"
         :active="true"
     />
-    <x-native:bottom-nav-item
+    <native:bottom-nav-item
         id="profile"
         icon="person"
         label="Profile"
         url="/profile"
         badge="3"
-        badge-color="#FF0000"
     />
-</x-native:bottom-nav>
+</native:bottom-nav>
 ```
 @endverbatim
 
-## BottomNav Props
+## Props
 
-- `label-visibility` - `"labeled"` (default), `"selected"`, or `"unlabeled"`
+- `label-visibility` - `labeled`, `selected`, or `unlabeled` (optional, default: `labeled`)
 - `dark` - Force dark mode styling (optional)
 
-## BottomNavItem Props
+## Children
+
+A `<native:bottom-nav>` can contain up to 5 `<native:bottom-nav-item>` elements.
 
-- `id` - Unique identifier (required)
-- `icon` - Material icon name (required)
-- `label` - Display text (required)
-- `url` - Navigation URL (required)
-- `active` - Highlight as active (default: `false`)
+- `id` - Unique identifier
+- `icon` - A named [icon](icons)
+- `label` - Accessibility label (optional)
+- `url` - A URL to navigate to in the web view (optional)
+- `active` - Highlight this item as active (optional, default: `false`)
 - `badge` - Badge text/number (optional)
-- `badge-color` - Badge background color hex (optional)
-- `news` - Show "new" indicator dot (default: `false`)
+- `news` - Show "new" indicator dot (optional, default: `false`)
+
+<aside>
+
+Any `url` that doesn't match the web view's domain will open in the user's default browser.
+
+</aside>
+
+### `badge` example
+<div class="sm:w-1/2">
+
+![](/img/docs/edge-bottom-nav-item-badge.png)
+
+</div>

public/img/docs/edge-bottom-nav-item-badge.png

@@ -67,3 +67,9 @@ It doesn't even rely on the web view!
 Blade is an expressive and straightforward templating language that is very familiar to most Laravel users, and also
 super accessible to anyone who's used to writing HTML. All of our components are Blade components, which allows us to
 use Blade's battle-tested processing engine to rapidly compile the necessary transformation just in time.
+
+## Where to define your native components
+
+They can be defined in any Blade file, but for them to be processed, that Blade file will need to be rendered. We
+recommend putting your components in a Blade component that is likely to be rendered on every request, such as your
+main layout, e.g. `layouts/app.blade.php` or one of its child views/components.