<.dm_bottom_nav
  id="bottom-nav-single-default"
  position="static"
  items={[%{active: true, label: "Home", icon: "home"}, %{label: "Search", icon: "magnify"}, %{label: "Alerts", icon: "bell"}, %{label: "Profile", icon: "account"}]}
 />

<.dm_bottom_nav
  id="bottom-nav-single-colored"
  position="static"
  items={[%{active: true, label: "Home", icon: "home"}, %{label: "Search", icon: "magnify"}, %{label: "Settings", icon: "cog"}]}
  color="primary"
 />

<.dm_bottom_nav
  id="bottom-nav-colors-secondary"
  position="static"
  items={[%{active: true, label: "Home", icon: "home"}, %{label: "Search", icon: "magnify"}, %{label: "Profile", icon: "account"}]}
  color="secondary"
 />
<.dm_bottom_nav
  id="bottom-nav-colors-success"
  position="static"
  items={[%{active: true, label: "Home", icon: "home"}, %{label: "Search", icon: "magnify"}, %{label: "Profile", icon: "account"}]}
  color="success"
 />
<.dm_bottom_nav
  id="bottom-nav-colors-warning"
  position="static"
  items={[%{active: true, label: "Home", icon: "home"}, %{label: "Search", icon: "magnify"}, %{label: "Profile", icon: "account"}]}
  color="warning"
 />
<.dm_bottom_nav
  id="bottom-nav-colors-error"
  position="static"
  items={[%{active: true, label: "Home", icon: "home"}, %{label: "Search", icon: "magnify"}, %{label: "Profile", icon: "account"}]}
  color="error"
 />

<.dm_bottom_nav
  id="bottom-nav-single-sticky-position"
  position="sticky"
  items={[%{active: true, label: "Home", icon: "home"}, %{label: "Explore", icon: "magnify"}, %{label: "Alerts", icon: "bell"}, %{label: "Profile", icon: "account"}]}
  color="primary"
 />