Navigation

window.addEventListener('unveilyGlueReady', () => {
  window.unveilyBridge.bottomTabs.setConfig({ items: [...] });
  window.unveilyBridge.sideDrawer.setConfig({ items: [...] });
}, { once: true });

{
  "modules": {
    "bottomTabs":  { "enabled": true, "autoHide": false, "heightDp": 60 },
    "sideDrawer":  { "enabled": true },
    "topDownMenu": { "enabled": true },
    "bottomSheet": { "enabled": true }
  }
}

cp config.json config.json.bak && cp config.sample.json config.json

{
  "modules": {
    "bottomTabs": {
      "enabled": true,
      "panelColor": "#CC1A1A2E"
    }
  }
}

{
  "modules": {
    "bottomTabs": {
      "enabled": true,
      "panelColor": {
        "light": "#CCF0F0F5",
        "dark":  "#CC1A1A2E"
      }
    },
    "sideDrawer": {
      "enabled": true,
      "panelColor": {
        "light": "#CCFFFFFF",
        "dark":  "#CC2C2C2C"
      }
    },
    "topDownMenu": {
      "enabled": true,
      "panelColor": "#CC101020"
    },
    "bottomSheet": {
      "enabled": true,
      "panelColor": "#CC1C1C1E"
    }
  }
}

{
  "modules": {
    "bottomTabs": {
      "enabled": true,
      "panelColor":  "#CC1A1A2E",
      "iconColor":   { "light": "#1A1A2E", "dark": "#FFFFFF" },
      "labelColor":  { "light": "#1A1A2E", "dark": "#FFFFFF" },
      "activeAlpha":   1.0,
      "inactiveAlpha": 0.5
    },
    "sideDrawer": {
      "enabled": true,
      "panelColor": "#CC2C2C2C",
      "iconColor":  "#FFFFFF",
      "labelColor": "#FFFFFF"
    },
    "topDownMenu": {
      "enabled": true,
      "panelColor": "#CC101020",
      "iconColor":  "#FFFFFF",
      "labelColor": "#CCCCCC"
    }
  }
}

"bottomTabs": {
  "enabled": true,
  "panelColor": "#E8101020",
  "iconColor":  { "light": "#1F2937", "dark": "#FFFFFF" },
  "activeIndicator":      "dot",
  "activeIndicatorColor": { "light": "#2563EB", "dark": "#60A5FA" }
}

{
  "modules": {
    "bottomTabs": {
      "enabled": true,
      "heightDp": 64
    }
  }
}

window.unveilyBridge.bottomTabs.show();
window.unveilyBridge.bottomTabs.hide();
window.unveilyBridge.bottomTabs.toggle();

window.unveilyBridge.bottomTabs.setConfig({
  visible: false,  // optional — default: true. Pass false to keep the bar hidden on first load.
  items: [
    { id: "home",   label: "Home",   icon: "home.svg",   url: "/home" },
    { id: "search", label: "Search", icon: "search.svg", url: "/search" },
    { id: "my",     label: "My",     icon: "person.svg", url: "/my" }
  ]
});

window.unveilyBridge.bottomTabs.setBadge("home", 5);  // show badge
window.unveilyBridge.bottomTabs.setBadge("home", 0);  // remove badge

function onBottomTabClick(result) {
  console.log(result.id);   // tab id
  console.log(result.url);  // url configured for the tab
}

window.unveilyBridge.sideDrawer.open();
window.unveilyBridge.sideDrawer.close();
window.unveilyBridge.sideDrawer.toggle();

window.unveilyBridge.sideDrawer.setConfig({
  widthDp: 320,   // optional — drawer width in dp (default: 320)
  items: [
    { id: "profile",  label: { ko: "프로필",  en: "Profile",  ja: "プロフィール" }, icon: "person.png",   url: "/profile" },
    { id: "settings", label: { ko: "설정",    en: "Settings", ja: "設定"         }, icon: "settings.png", url: "/settings" },
    { id: "refresh",  type: "button", label: { ko: "새로고침", en: "Refresh", ja: "更新" } },
    { id: "lang",     type: "select", value: "en", options: [
        { value: "ko", label: { ko: "한국어", en: "Korean",   ja: "韓国語" } },
        { value: "en", label: { ko: "영어",   en: "English",  ja: "英語"   } },
        { value: "ja", label: { ko: "일본어", en: "Japanese", ja: "日本語" } }
    ]}
  ]
});

window.unveilyBridge.sideDrawer.setItemEnabled("settings", false);
window.unveilyBridge.sideDrawer.setItemVisible("settings", false);

window.unveilyBridge.sideDrawer.setBadge("profile", 3);
window.unveilyBridge.sideDrawer.setBadge("profile", 0); // remove

// icon-type item tapped (backward compatible)
function onSideDrawerItemClick(result) {
  console.log(result.id);   // item id
  console.log(result.url);  // url of the tapped item
}

// button or select item interacted with
function onSideDrawerAction(result) {
  console.log(result.id);     // item id
  console.log(result.type);   // "button" | "select"
  console.log(result.value);  // "" for button; selected option value for select
}

window.unveilyBridge.topDownMenu.open();
window.unveilyBridge.topDownMenu.close();
window.unveilyBridge.topDownMenu.toggle();

window.unveilyBridge.topDownMenu.setConfig({
  columns: 4,              // grid columns (1–5, default: 4)
  maxHeightFraction: 0.5,  // maximum height fraction — a cap (0.1–1.0, default: 0.5). Shows shorter than the cap with little content
  items: [
    { id: "home",     label: { ko: "홈",    en: "Home",    ja: "ホーム" }, icon: "home.png" },
    { id: "search",   label: { ko: "검색",  en: "Search",  ja: "検索"   }, icon: "search.png" },
    { id: "refresh",  type: "button", label: { ko: "새로고침", en: "Refresh", ja: "更新" } },
    { id: "lang",     type: "select", value: "en", options: [
        { value: "ko", label: { ko: "한국어", en: "Korean",   ja: "韓国語" } },
        { value: "en", label: { ko: "영어",   en: "English",  ja: "英語"   } },
        { value: "ja", label: { ko: "일본어", en: "Japanese", ja: "日本語" } }
    ]},
    { id: "banner",   type: "image",  icon: "promo.svg", heightDp: 80 }
  ]
});

var cols = window.unveilyBridge.app.isTablet() ? 5 : 3;
window.unveilyBridge.topDownMenu.setConfig({ columns: cols, items: [ /* ... */ ] });

window.unveilyBridge.topDownMenu.setItemEnabled("search", false);
window.unveilyBridge.topDownMenu.setItemVisible("search", false);

// icon-type item tapped (backward compatible)
function onTopDownMenuItemClick(result) {
  console.log(result.id);   // item id
  console.log(result.url);  // url of the tapped item
}

// button or select item interacted with
function onTopDownMenuAction(result) {
  console.log(result.id);     // item id
  console.log(result.type);   // "button" | "select"
  console.log(result.value);  // "" for button; selected option value for select
}

window.unveilyBridge.bottomSheet.show({
  title: "Product Details",  // optional
  content: "Description",    // optional
  heightFraction: 0.5,       // fraction of screen height (0.1–1.0, default: 0.5)
  heightDp: 400              // fixed height in dp — takes priority over heightFraction
});

window.unveilyBridge.bottomSheet.hide();
window.unveilyBridge.bottomSheet.toggle();

// Closed — height applies on the next show()
window.unveilyBridge.bottomSheet.setConfig({ heightFraction: 0.7 });

// Called while open — immediate live resize
window.unveilyBridge.bottomSheet.setConfig({ heightFraction: 0.3 });

{
  "id": "settings",
  "label": { "ko": "설정", "en": "Settings", "ja": "設定" },
  "icon": "settings.png",
  "url": "/settings"
}

{
  "id": "banner",
  "type": "image",
  "icon": "promo.svg",
  "heightDp": 80,
  "url": "/promo"
}

{
  "id": "refresh",
  "type": "button",
  "label": { "ko": "새로고침", "en": "Refresh", "ja": "更新" }
}

{
  "id": "lang",
  "type": "select",
  "value": "en",
  "options": [
    { "value": "ko", "label": { "ko": "한국어", "en": "Korean",   "ja": "韓国語"  } },
    { "value": "en", "label": { "ko": "영어",   "en": "English",  "ja": "英語"    } },
    { "value": "ja", "label": { "ko": "일본어", "en": "Japanese", "ja": "日本語"  } }
  ]
}

{
  "id": "dark",
  "type": "toggle",
  "label": { "ko": "다크 모드", "en": "Dark Mode", "ja": "ダークモード" },
  "value": false
}

{ "type": "separator" }

{
  "type": "header",
  "label": { "ko": "설정", "en": "Settings", "ja": "設定" }
}

{
  "id": "dark",
  "type": "toggle",
  "title": { "ko": "화면", "en": "Appearance", "ja": "画面" },
  "label": { "ko": "다크 모드", "en": "Dark Mode", "ja": "ダークモード" },
  "value": false
}

// Plain string — same label regardless of locale
{ id: "home", label: "Home", icon: "home.png" }

// i18n object — label switches with setLocale()
{ id: "home", label: { ko: "홈", en: "Home", ja: "ホーム" }, icon: "home.png" }

window.unveilyBridge.app.setLocale("ko");  // "ko" | "en" | "ja"
window.unveilyBridge.app.setLocale("");    // reset to device locale

window.unveilyBridge.topDownMenu.setConfig({
  items: [
    { id: "home", label: { ko: "홈", en: "Home", ja: "ホーム" }, icon: "home.png" },
    { id: "lang", type: "select", value: "en", options: [
        { value: "ko", label: { ko: "한국어", en: "Korean",   ja: "韓国語" } },
        { value: "en", label: { ko: "영어",   en: "English",  ja: "英語"   } },
        { value: "ja", label: { ko: "일본어", en: "Japanese", ja: "日本語" } }
    ]}
  ]
});

function onTopDownMenuAction(result) {
  if (result.id === "lang" && result.type === "select") {
    window.unveilyBridge.app.setLocale(result.value);
  }
}