JobyKit.NavComponent (JobyKit v0.3.2)

Copy Markdown View Source

Small kit-shipped navigation primitives. The simple_nav/1 function component renders a daisyUI navbar suitable for the greenfield bootstrap (mix joby_kit.bootstrap) — Home / Design / Custom Designs — with an active-state highlight and an :actions slot for trailing controls such as JobyKit.CoreComponents.theme_toggle/1.

Hosts can use it anywhere: a layout, a LiveView render, or a function component template. Pass links: to override the default link list.

Surface belongs to the layout

simple_nav/1 renders no background, border, or outer spacing. A nav that painted its own surface could not sit inside a layout's own sticky bar without the two disagreeing — a translucent bar with an opaque nav inside it shows the seam wherever the nav's max-width ends. Give the surface to the container:

<div class="sticky top-0 z-40 border-b border-base-300 bg-base-100">
  <div class="mx-auto w-full max-w-6xl px-4">
    <.simple_nav active="home" brand="MyApp" />
  </div>
</div>

Summary

Functions

simple_nav(assigns)

Attributes

  • active (:string) - The :key of the link to mark current. Defaults to nil.
  • brand (:string) - Defaults to "JobyKit".
  • brand_href (:string) - Defaults to "/".
  • links (:list) - Maps of %{key:, label:, href:}. Replaces the default three. Defaults to [%{label: "Home", key: "home", href: "/"}, %{label: "Design", key: "design", href: "/design"}, %{label: "Custom Designs", key: "custom-designs", href: "/custom-designs"}].
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • actions - Trailing controls, e.g. a theme toggle or account menu.