LTR

Left-to-right text direction.

html

<nav class="ltrnav ltrnav--en" dir="ltr" lang="en">
  <span class="ltrnav__icon" style="background:#BFD9F2;" aria-hidden="true">&#9776;</span>
  <span class="ltrnav__label ltrnav__label--en">Dashboard</span>
  <span class="ltrnav__label ltrnav__label--fr">Tableau de bord</span>
  <span class="ltrnav__label ltrnav__label--de">&Uuml;bersicht</span>
  <span class="ltrnav__badge" style="background:#BFD9F2;">3</span>
</nav>
<style>
.ltrnav { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 14px 16px; border-radius: 12px; width: 280px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; }
.ltrnav__icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.ltrnav__label { display: none; flex: 1; font-weight: 600; }
.ltrnav--en .ltrnav__label--en, .ltrnav--fr .ltrnav__label--fr, .ltrnav--de .ltrnav__label--de { display: block; }
.ltrnav__badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #241430; }
</style>

tailwind

<nav class="ltrnavtw ltrnavtw--en font-sans text-[#241430] bg-[#FAF7F2] py-3.5 px-4 rounded-xl w-[280px] box-border flex items-center gap-2.5" dir="ltr" lang="en">
  <span class="w-[30px] h-[30px] rounded-lg grid place-items-center shrink-0" style="background:#BFD9F2;" aria-hidden="true">&#9776;</span>
  <span class="ltrnavtw__label ltrnavtw__label--en hidden flex-1 font-semibold">Dashboard</span>
  <span class="ltrnavtw__label ltrnavtw__label--fr hidden flex-1 font-semibold">Tableau de bord</span>
  <span class="ltrnavtw__label ltrnavtw__label--de hidden flex-1 font-semibold">&Uuml;bersicht</span>
  <span class="min-w-[20px] h-5 px-1.5 rounded-full grid place-items-center text-[11px] font-bold" style="background:#BFD9F2;">3</span>
</nav>
<style>
.ltrnavtw--en .ltrnavtw__label--en, .ltrnavtw--fr .ltrnavtw__label--fr, .ltrnavtw--de .ltrnavtw__label--de { display: block; }
</style>

react

export function Ltr({
  lang = "en",
  showIcon = true,
  accent = "#BFD9F2",
  badgeCount = 3,
}) {
  const labels = { en: "Dashboard", fr: "Tableau de bord", de: "\u00DCbersicht" };
  return (
    <nav dir="ltr" lang={lang} style={{ font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: "14px 16px", borderRadius: 12, width: 280, boxSizing: "border-box", display: "flex", alignItems: "center", gap: 10 }}>
      {showIcon && <span aria-hidden="true" style={{ width: 30, height: 30, borderRadius: 8, display: "grid", placeItems: "center", flexShrink: 0, background: accent }}>&#9776;</span>}
      <span style={{ flex: 1, fontWeight: 600 }}>{labels[lang]}</span>
      <span style={{ minWidth: 20, height: 20, padding: "0 6px", borderRadius: 999, display: "grid", placeItems: "center", fontSize: 11, fontWeight: 700, color: "#241430", background: accent }}>{badgeCount}</span>
    </nav>
  );
}