AppSwitcher

An app switcher lets users quickly navigate between different applications or modules within a platform.

My Apps

Footer

layout

title

footer

<HvAppSwitcher 
  layout="single"
  title="My Apps"
  footer="Footer"
  applications={[{"name":"UI Kit Storybook","color":"#FF4785","iconUrl":"https://pbs.twimg.com/profile_images/1100804485616566273/sOct-Txm_400x400.png","description":"This is the Storybook for the UI Kit project","url":"https://lumada-design.github.io/uikit/master/","target":"_top"},{"name":"UI Kit repository (New Tab)","description":"This is the UI Kit repository on Github","url":"https://github.com/lumada-design/hv-uikit-react/","target":"_blank"},{"name":"App with a bigger name than the other just to showcase the truncation on the AppSwitcher","color":"primary","description":"App 1 description"},{"name":"No Icon App","color":"brand","description":"This is a disabled App without an icon","disabled":true},{"name":"No Description App","color":"brand"}]}
/>

<HvAppSwitcher 
  layout="single"
  title="My Apps"
  footer="Footer"
  applications={[{"name":"UI Kit Storybook","color":"#FF4785","iconUrl":"https://pbs.twimg.com/profile_images/1100804485616566273/sOct-Txm_400x400.png","description":"This is the Storybook for the UI Kit project","url":"https://lumada-design.github.io/uikit/master/","target":"_top"},{"name":"UI Kit repository (New Tab)","description":"This is the UI Kit repository on Github","url":"https://github.com/lumada-design/hv-uikit-react/","target":"_blank"},{"name":"App with a bigger name than the other just to showcase the truncation on the AppSwitcher","color":"primary","description":"App 1 description"},{"name":"No Icon App","color":"brand","description":"This is a disabled App without an icon","disabled":true},{"name":"No Description App","color":"brand"}]}
/>

Many entries

When there are many entries, the AppSwitcher will scroll vertically. Use the isActionSelectedCallback prop to highlight the selected application.

Big list of applications

export default function Demo() {
  return (
    <HvAppSwitcher
      className="max-h-360px"
      layout="dual"
      title="Big list of applications"
      applications={applicationList}
      isActionSelectedCallback={(app) => app.id === "app_5"}
    />
  );
}


const applicationList = Array(100)
  .keys()
  .map<HvAppSwitcherActionApplication>((i) => ({
    id: `app_${i}`,
    name:
      i % 3 === 0
        ? `Application ${i} is an application with a big name`
        : `Application ${i}`,
    description:
      i % 5 === 0
        ? `This is the auto-generated application number ${i}`
        : undefined,
    url: "https://github.com/lumada-design/hv-uikit-react",
    target: i % 2 === 0 ? "_top" : "_blank",
  }))
  .toArray();

export default function Demo() {
  return (
    <HvAppSwitcher
      className="max-h-360px"
      layout="dual"
      title="Big list of applications"
      applications={applicationList}
      isActionSelectedCallback={(app) => app.id === "app_5"}
    />
  );
}

const applicationList = Array(100)
  .keys()
  .map<HvAppSwitcherActionApplication>((i) => ({
    id: `app_${i}`,
    name:
      i % 3 === 0
        ? `Application ${i} is an application with a big name`
        : `Application ${i}`,
    description:
      i % 5 === 0
        ? `This is the auto-generated application number ${i}`
        : undefined,
    url: "https://github.com/lumada-design/hv-uikit-react",
    target: i % 2 === 0 ? "_top" : "_blank",
  }))
  .toArray();

Action Bar Avatar