Is identity theft a joke?

It's not. Millions of families suffer every year!

Components

Explore Contextual UI components designed for humans, search engines, and AI agents.

Navbar

The Navbar component renders accessible navigation structures with full semantic support.

React component implementation using Navbar subcomponents.

<Navbar.Root data={data.navbar} className="flex justify-between items-center w-full">
  <Navbar.Brand className="font-bold text-lg no-underline flex items-center gap-2.5">
    <span>気</span> Contextual UI
  </Navbar.Brand>
  <Navbar.Content className="flex gap-6 items-center">
    {data.navbar?.links.map((link) => (
      <a key={link.id} href={link.href}>{link.label}</a>
    ))}
  </Navbar.Content>
</Navbar.Root>

Breadcrumb

The Breadcrumb component automatically injects Schema.org BreadcrumbList JSON-LD for search engine indexing while enforcing accessible semantic navigation.

Accessible breadcrumb trail implementation with list items and separators.

<Breadcrumb.Root data={breadcrumbData} baseUrl="https://contextual-ui.dev">
  <Breadcrumb.List className="flex list-none p-0 m-0 gap-2 items-center text-sm">
    {breadcrumbData.map((item, index) => (
      <Breadcrumb.Item key={item.id}>
        <Breadcrumb.Link href={item.url}>{item.label}</Breadcrumb.Link>
      </Breadcrumb.Item>
    ))}
  </Breadcrumb.List>
</Breadcrumb.Root>

FAQ

The FAQ component organizes collapsible question-and-answer pairs with automatic Schema.org FAQPage structured data injection.

Collapsible FAQ layout with trigger buttons and content sections.

<Faq.Root data={faqData}>
  {faqData.map((item) => (
    <Faq.Item key={item.id} id={item.id}>
      <Faq.Trigger>{item.question}</Faq.Trigger>
      <Faq.Content>{item.answer}</Faq.Content>
    </Faq.Item>
  ))}
</Faq.Root>