Anchor - Hakumi Components

Basic

The simplest usage of Anchor. Click on the links to navigate between sections, or scroll to see the active link update.

Code

<%= render HakumiComponents::Grid::Row::Component.new(align: :top) do %>
  <%= render HakumiComponents::Grid::Col::Component.new(span: 16) do %>
    <div id="part-1" style="height: 100vh; background: rgba(255,0,0,0.02); padding: 16px;">
      <%= render HakumiComponents::Typography::Title::Component.new(level: 2) do %>Part 1<% end %>
      <%= render HakumiComponents::Typography::Paragraph::Component.new do %>
        This is the content of Part 1. Scroll down to see more sections.
      <% end %>
    </div>
    <div id="part-2" style="height: 100vh; background: rgba(0,255,0,0.02); padding: 16px;">
      <%= render HakumiComponents::Typography::Title::Component.new(level: 2) do %>Part 2<% end %>
      <%= render HakumiComponents::Typography::Paragraph::Component.new do %>
        This is the content of Part 2. The anchor navigation on the right tracks your scroll position.
      <% end %>
    </div>
    <div id="part-3" style="height: 100vh; background: rgba(0,0,255,0.02); padding: 16px;">
      <%= render HakumiComponents::Typography::Title::Component.new(level: 2) do %>Part 3<% end %>
      <%= render HakumiComponents::Typography::Paragraph::Component.new do %>
        This is the content of Part 3. Click on the anchor links to navigate.
      <% end %>
    </div>
  <% end %>
  <%= render HakumiComponents::Grid::Col::Component.new(span: 8) do %>
    <%= render HakumiComponents::Anchor::Component.new do |anchor| %>
      <% anchor.with_link(href: "#part-1", title: "Part 1") %>
      <% anchor.with_link(href: "#part-2", title: "Part 2") %>
      <% anchor.with_link(href: "#part-3", title: "Part 3") %>
    <% end %>
  <% end %>
<% end %>

Static Anchor

Do not change state when page is scrolling. Set affix to false to disable fixed positioning.

Code

<%= render HakumiComponents::Grid::Row::Component.new(align: :top) do %>
  <%= render HakumiComponents::Grid::Col::Component.new(span: 16) do %>
    <div id="static-part-1" style="height: 100vh; background: rgba(255,0,0,0.02); padding: 16px;">
      <%= render HakumiComponents::Typography::Title::Component.new(level: 2) do %>Part 1<% end %>
      <%= render HakumiComponents::Typography::Paragraph::Component.new do %>
        Static anchor does not change state when page is scrolling.
      <% end %>
    </div>
    <div id="static-part-2" style="height: 100vh; background: rgba(0,255,0,0.02); padding: 16px;">
      <%= render HakumiComponents::Typography::Title::Component.new(level: 2) do %>Part 2<% end %>
      <%= render HakumiComponents::Typography::Paragraph::Component.new do %>
        The anchor links still work for navigation but won't highlight based on scroll.
      <% end %>
    </div>
    <div id="static-part-3" style="height: 100vh; background: rgba(0,0,255,0.02); padding: 16px;">
      <%= render HakumiComponents::Typography::Title::Component.new(level: 2) do %>Part 3<% end %>
      <%= render HakumiComponents::Typography::Paragraph::Component.new do %>
        Use affix: false to disable fixed positioning.
      <% end %>
    </div>
  <% end %>
  <%= render HakumiComponents::Grid::Col::Component.new(span: 8) do %>
    <%= render HakumiComponents::Anchor::Component.new(affix: false) do |anchor| %>
      <% anchor.with_link(href: "#static-part-1", title: "Part 1") %>
      <% anchor.with_link(href: "#static-part-2", title: "Part 2") %>
      <% anchor.with_link(href: "#static-part-3", title: "Part 3") %>
    <% end %>
  <% end %>
<% end %>

Horizontal Anchor

Horizontal anchor navigation with direction :horizontal. The active indicator slides below the links.

Code

<%= render HakumiComponents::Anchor::Component.new(direction: :horizontal) do |anchor| %>
  <% anchor.with_link(href: "#horizontal-part-1", title: "Part 1") %>
  <% anchor.with_link(href: "#horizontal-part-2", title: "Part 2") %>
  <% anchor.with_link(href: "#horizontal-part-3", title: "Part 3") %>
<% end %>
<div id="horizontal-part-1" style="height: 100vh; background: rgba(255,0,0,0.02); padding: 16px;">
  <%= render HakumiComponents::Typography::Title::Component.new(level: 2) do %>Part 1<% end %>
  <%= render HakumiComponents::Typography::Paragraph::Component.new do %>
    Horizontal anchor navigation displays links in a row.
  <% end %>
</div>
<div id="horizontal-part-2" style="height: 100vh; background: rgba(0,255,0,0.02); padding: 16px;">
  <%= render HakumiComponents::Typography::Title::Component.new(level: 2) do %>Part 2<% end %>
  <%= render HakumiComponents::Typography::Paragraph::Component.new do %>
    The active indicator slides horizontally below the links.
  <% end %>
</div>
<div id="horizontal-part-3" style="height: 100vh; background: rgba(0,0,255,0.02); padding: 16px;">
  <%= render HakumiComponents::Typography::Title::Component.new(level: 2) do %>Part 3<% end %>
  <%= render HakumiComponents::Typography::Paragraph::Component.new do %>
    Use direction: :horizontal for this layout.
  <% end %>
</div>

Props

Prop	Type	Default	Description
`affix`	`Boolean`	`true`	Enable fixed positioning when scrolling
`bounds`	`Number`	`5`	Bounding distance in pixels for anchor area detection
`offset_top`	`Number`	`0`	Pixels to offset from top when calculating scroll position
`target_offset`	`Number`	`nil`	Anchor scroll offset (defaults to offset_top value if not specified)
`direction`	`Symbol`	`:vertical`	Layout direction of anchor navigation
`replace`	`Boolean`	`false`	Replace items in browser history instead of pushing new entries

Slots

Use the links slot to define navigation items

Prop	Type	Default	Description
`links`	`Slot (renders_many)`	`nil`	Navigation links for anchor items

Anchor Link Props

Props for individual anchor link items

Prop	Type	Default	Description
`href`	`String`	`nil`	Target element ID with
`title`	`String`	`nil`	Link text displayed in navigation (required)
`target`	`String`	`nil`	Specifies where to open the linked URL
`links`	`Slot (renders_many)`	`nil`	Nested child links for hierarchical navigation

HTML Options

Prop	Type	Default	Description
`**html_options`	`Keyword args`	`{}`	Additional HTML attributes merged into the root element

JavaScript API

Access via element.hakumiComponent.api

Prop	Type	Default	Description
`scrollTo(href)`	`Method`	`-`	Scroll to the element specified by href
`setActive(href)`	`Method`	`-`	Manually set the active anchor link
`getActiveHref()`	`Method`	`-`	Get the href of the currently active link
`refresh()`	`Method`	`-`	Recalculate and update the active link based on scroll position