Breadcumbs

Breadcrumbs Props

Name	Type	Default	Description
component	string	'div'	Component's HTML Element
fontSizeIos	string	'text-[17px]'	Font size in iOS theme
fontSizeMaterial	string	'text-[14px]'	Font size in Material theme

BreadcrumbsItem Props

Name	Type	Default	Description
active	boolean	false	Marks breadcrumb item as active/current (usually last item in breadcrumbs)
colors	object		Object with Tailwind CSS colors classes
colors.bgIos	string	''
colors.bgMaterial	string	'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.textActiveIos	string	'text-black dark:text-white'
colors.textActiveMaterial	string	'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container'
colors.textIos	string	'text-black text-opacity-55 dark:text-white dark:text-opacity-55'
colors.textMaterial	string	'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container'
component	string	'div'	Component's HTML Element

BreadcrumbsCollapsed Props

Name	Type	Default	Description
colors	object		Object with Tailwind CSS colors classes
colors.bgIos	string	'bg-black bg-opacity-15 dark:bg-white dark:bg-opacity-15'
colors.bgMaterial	string	'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.dotBgIos	string	'bg-black dark:bg-white'
colors.dotBgMaterial	string	'bg-md-light-primary dark:bg-md-dark-primary'
component	string	'div'	Component's HTML Element

Examples

Vue

<template>
  <i-page>
    <i-navbar title="Breadcrumbs" />

    <i-block strong inset>
      <p>
        Breadcrumbs allow users to ieep track and maintain awareness of their
        locations within the app or website. They should be used for large sites
        and apps with hierarchically arranged pages.
      </p>
    </i-block>

    <i-block-title>Basic</i-block-title>
    <i-block strong-ios outline-ios>
      <i-breadcrumbs>
        <i-breadcrumbs-item>
          <i-link>Home</i-link>
        </i-breadcrumbs-item>
        <i-breadcrumbs-separator />
        <i-breadcrumbs-item>
          <i-link>Catalog</i-link>
        </i-breadcrumbs-item>
        <i-breadcrumbs-separator />
        <i-breadcrumbs-item active>Phones</i-breadcrumbs-item>
      </i-breadcrumbs>
    </i-block>

    <i-block-title>Scrollable</i-block-title>
    <i-block-header
      >Breadcrumbs will be scrollable if they don't fit the
      screen</i-block-header
    >
    <i-block strong-ios outline-ios>
      <i-breadcrumbs>
        <i-breadcrumbs-item>
          <i-link>Home</i-link>
        </i-breadcrumbs-item>
        <i-breadcrumbs-separator />
        <i-breadcrumbs-item>
          <i-link>Catalog</i-link>
        </i-breadcrumbs-item>
        <i-breadcrumbs-separator />
        <i-breadcrumbs-item>
          <i-link>Phones</i-link>
        </i-breadcrumbs-item>
        <i-breadcrumbs-separator />
        <i-breadcrumbs-item>
          <i-link>Apple</i-link>
        </i-breadcrumbs-item>
        <i-breadcrumbs-separator />
        <i-breadcrumbs-item active>iPhone 12</i-breadcrumbs-item>
      </i-breadcrumbs>
    </i-block>

    <i-block-title>Collapsed</i-block-title>
    <i-block strong-ios outline-ios>
      <i-breadcrumbs>
        <i-breadcrumbs-item>
          <i-link>Home</i-link>
        </i-breadcrumbs-item>
        <i-breadcrumbs-separator />
        <i-breadcrumbs-collapsed
          ref="popoverTargetRef"
          @click="() => (popoverOpened = true)"
        />

        <i-breadcrumbs-separator />
        <i-breadcrumbs-item active>iPhone 12</i-breadcrumbs-item>
      </i-breadcrumbs>
    </i-block>
    <i-popover
      :opened="popoverOpened"
      :target="popoverTargetRef"
      style="width: 120px"
      @backdropclick="() => (popoverOpened = false)"
    >
      <i-list nested>
        <i-list-item
          link
          title="Catalog"
          @click="() => (popoverOpened = false)"
        />
        <i-list-item
          link
          title="Phones"
          @click="() => (popoverOpened = false)"
        />
        <i-list-item
          link
          title="Apple"
          @click="() => (popoverOpened = false)"
        />
      </i-list>
    </i-popover>
  </i-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iLink,
    iBlock,
    iBlockTitle,
    iBlockHeader,
    iBreadcrumbs,
    iBreadcrumbsItem,
    iBreadcrumbsSeparator,
    iBreadcrumbsCollapsed,
    iPopover,
    iList,
    iListItem,
  } from 'ina-ui/vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iLink,
      iBlock,
      iBlockTitle,
      iBlockHeader,
      iBreadcrumbs,
      iBreadcrumbsItem,
      iBreadcrumbsSeparator,
      iBreadcrumbsCollapsed,
      iPopover,
      iList,
      iListItem,
    },
    setup() {
      const popoverOpened = ref(false);
      const popoverTargetRef = ref(null);
      return {
        popoverOpened,
        popoverTargetRef,
      };
    },
  };
</script>

React

import React, { useRef, useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  BlockTitle,
  BlockHeader,
  Block,
  Breadcrumbs,
  BreadcrumbsItem,
  BreadcrumbsSeparator,
  BreadcrumbsCollapsed,
  Popover,
  List,
  ListItem,
  Link,
} from 'ina-ui/react';

export default function BreadcrumbsPage() {
  const isPreview = document.location.href.includes('examplePreview');

  const popoverTargetRef = useRef(null);
  const [popoverOpened, setPopoverOpened] = useState(false);
  return (
    <Page>
      <Navbar
        title="Breadcrumbs"
        />

      <Block strong inset>
        Breadcrumbs allow users to ieep track and maintain awareness of their
        locations within the app or website. They should be used for large sites
        and apps with hierarchically arranged pages.
      </Block>

      <BlockTitle>Basic</BlockTitle>
      <Block strongIos outlineIos>
        <Breadcrumbs>
          <BreadcrumbsItem>
            <Link>Home</Link>
          </BreadcrumbsItem>
          <BreadcrumbsSeparator />
          <BreadcrumbsItem>
            <Link>Catalog</Link>
          </BreadcrumbsItem>
          <BreadcrumbsSeparator />
          <BreadcrumbsItem active>Phones</BreadcrumbsItem>
        </Breadcrumbs>
      </Block>

      <BlockTitle>Scrollable</BlockTitle>
      <BlockHeader>
        Breadcrumbs will be scrollable if they don't fit the screen
      </BlockHeader>
      <Block strongIos outlineIos>
        <Breadcrumbs>
          <BreadcrumbsItem>
            <Link>Home</Link>
          </BreadcrumbsItem>
          <BreadcrumbsSeparator />
          <BreadcrumbsItem>
            <Link>Catalog</Link>
          </BreadcrumbsItem>
          <BreadcrumbsSeparator />
          <BreadcrumbsItem>
            <Link>Phones</Link>
          </BreadcrumbsItem>
          <BreadcrumbsSeparator />
          <BreadcrumbsItem>
            <Link>Apple</Link>
          </BreadcrumbsItem>
          <BreadcrumbsSeparator />
          <BreadcrumbsItem active>iPhone 12</BreadcrumbsItem>
        </Breadcrumbs>
      </Block>

      <BlockTitle>Collapsed</BlockTitle>
      <Block strongIos outlineIos>
        <Breadcrumbs>
          <BreadcrumbsItem>
            <Link>Home</Link>
          </BreadcrumbsItem>
          <BreadcrumbsSeparator />
          <BreadcrumbsCollapsed
            ref={popoverTargetRef}
            onClick={() => setPopoverOpened(true)}
          />
          <BreadcrumbsSeparator />
          <BreadcrumbsItem active>iPhone 12</BreadcrumbsItem>
        </Breadcrumbs>
      </Block>

      <Popover
        opened={popoverOpened}
        className="breadcrumbs-popover"
        style={{ width: '120px' }}
        target={popoverTargetRef.current}
        onBackdropClick={() => setPopoverOpened(false)}
      >
        <List nested>
          <ListItem
            link
            title="Catalog"
            onClick={() => setPopoverOpened(false)}
          />
          <ListItem
            link
            title="Phones"
            onClick={() => setPopoverOpened(false)}
          />
          <ListItem
            link
            title="Apple"
            onClick={() => setPopoverOpened(false)}
          />
        </List>
      </Popover>
    </Page>
  );
}