> ## Documentation Index
> Fetch the complete documentation index at: https://docs.omni.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Creating multi-page dashboards

> Build multi-page dashboards in advanced layout to give viewers a tabbed experience.

export const CheckIcon = ({label}) => {
  return <span>
      <Icon icon="circle-check" iconType="solid" color="#26bd6c" />
      {label && ` ${label}`}
    </span>;
};

export const XCircleIcon = ({label}) => {
  return <span>
      <Icon icon="circle-xmark" iconType="solid" color="#ff2465" />
      {label && ` ${label}`}
    </span>;
};

export const DbtNoteIssueIcon = ({label}) => {
  return <span>
      <Icon icon="circle-info" iconType="solid" className="icons" />
      {label && ` ${label}`}
    </span>;
};

export const DbtWarningIssueIcon = ({label}) => {
  return <span>
      <Icon icon="triangle-exclamation" iconType="solid" className="icons" />
      {label && ` ${label}`}
    </span>;
};

export const DbtErrorIssueIcon = ({label}) => {
  return <span>
      <Icon icon="circle-xmark" iconType="solid" className="icons" />
      {label && ` ${label}`}
    </span>;
};

export const SidebarHomeIcon = ({label}) => {
  return <span>
      <svg class="icon-position" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M19 8.71l-5.333 -4.148a2.666 2.666 0 0 0 -3.274 0l-5.334 4.148a2.665 2.665 0 0 0 -1.029 2.105v7.2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-7.2c0 -.823 -.38 -1.6 -1.03 -2.105"></path><path d="M16 15c-2.21 1.333 -5.792 1.333 -8 0"></path></svg>
    </span>;
};

export const SidebarRoutinesIcon = ({label}) => {
  return <span>
      <svg class="icon-position" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M10.5 21h-4.5a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v3"></path><path d="M16 3v4"></path><path d="M8 3v4"></path><path d="M4 11h10"></path><path d="M18 18m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><path d="M18 16.5v1.5l.5 .5"></path></svg>
    </span>;
};

export const SidebarActivityIcon = ({label}) => {
  return <span>
      <svg class="icon-position" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M3 12l3 0"></path><path d="M12 3l0 3"></path><path d="M7.8 7.8l-2.2 -2.2"></path><path d="M16.2 7.8l2.2 -2.2"></path><path d="M7.8 16.2l-2.2 2.2"></path><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>
    </span>;
};

export const SidebarAllIcon = ({label}) => {
  return <span>
      <svg class="icon-position" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M13 5h8"></path><path d="M13 9h5"></path><path d="M13 15h8"></path><path d="M13 19h5"></path><path d="M3 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path><path d="M3 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path></svg>
    </span>;
};

export const SidebarAiHubIcon = ({label}) => {
  return <span>
      <svg class="icon-position" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M5 12h-2l9 -9l9 9h-2"></path><path d="M5 12v7a2 2 0 0 0 2 2h5"></path><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2"></path><path d="M19 22.5a4.75 4.75 0 0 1 3.5 -3.5a4.75 4.75 0 0 1 -3.5 -3.5a4.75 4.75 0 0 1 -3.5 3.5a4.75 4.75 0 0 1 3.5 3.5"></path></svg>
    </span>;
};

export const DisabledFilterIcon = ({label}) => {
  return <span>
      <svg class="icon-position" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" stroke-width="2" viewBox="0 0 24 24" fill="currentColor"><path d="M6.92893 0.514648L21.0711 14.6568L19.6569 16.071L15.834 12.2486L15 13.4999V21.9999H9V13.4999L4 5.99993H3V3.99993L7.585 3.99965L5.51472 1.92886L6.92893 0.514648ZM9.585 5.99965L6.4037 5.99993L11 12.8944V19.9999H13V12.8944L14.392 10.8066L9.585 5.99965ZM21 3.99993V5.99993H20L18.085 8.87193L16.643 7.42893L17.5963 5.99993H15.213L13.213 3.99993H21Z"></path></svg>
    </span>;
};

export const ContentValidatorIcon = ({label}) => {
  return <span>
      <svg class="icon-position" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="18px" width="18px" xmlns="http://www.w3.org/2000/svg"><path d="M9.615 20h-2.615a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8"></path><path d="M14 19l2 2l4 -4"></path><path d="M9 8h4"></path><path d="M9 12h2"></path></svg>
    </span>;
};

export const TroubleshootWrenchIcon = ({label}) => {
  return <span>
      <svg class="icon-position" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M7 10h3v-3l-3.5 -3.5a6 6 0 0 1 8 8l6 6a2 2 0 0 1 -3 3l-6 -6a6 6 0 0 1 -8 -8l3.5 3.5"></path></svg>
    </span>;
};

export const DbtIdeIcon = ({label}) => {
  return <span>
      <svg class="icon-position" width="1em" height="1em" viewBox="3.5 3.5 17 17" fill="none" stroke-width="2" xmlns="http://www.w3.org/2000/svg">
        <path d="M18.8626 5.12387C19.2152 5.46293 19.4457 5.91049 19.5 6.39873C19.5 6.60217 19.4457 6.7378 19.3237 6.99548C19.2016 7.25317 17.6962 9.85715 17.2487 10.5759C16.991 10.9964 16.8553 11.4982 16.8553 11.9864C16.8553 12.4883 16.991 12.9765 17.2487 13.3969C17.6962 14.1157 19.2016 16.7333 19.3237 16.991C19.4457 17.2487 19.5 17.3707 19.5 17.5741C19.4457 18.0624 19.2288 18.5099 18.8761 18.8354C18.5371 19.1881 18.0895 19.4186 17.6148 19.4593C17.4114 19.4593 17.2758 19.4051 17.0316 19.283C16.7875 19.1609 14.1293 17.6962 13.4105 17.2487C13.3562 17.2215 13.302 17.1808 13.2342 17.1537L10.142 15.7881C10.0418 16.2789 10.0606 16.3806 10.5488 16.8553C10.6438 16.9503 10.7387 17.0316 10.8472 17.113C10.7658 17.1537 10.6709 17.1944 10.5895 17.2487C9.8707 17.6962 7.25317 19.2016 6.99548 19.3237C6.7378 19.4457 6.61573 19.5 6.39873 19.5C5.91049 19.4457 5.46293 19.2288 5.13743 18.8761C4.78481 18.5371 4.55425 18.0895 4.5 17.6013C4.51356 17.3978 4.56781 17.1944 4.67631 17.0181C4.79837 16.7604 6.3038 14.1429 6.75135 13.4241C7.00905 13.0036 7.14467 12.5154 7.14467 12.0136C7.14467 11.5117 7.00905 11.0235 6.75135 10.6031C6.3038 9.85715 4.78481 7.2396 4.67631 6.98192C4.56781 6.8056 4.51356 6.60217 4.5 6.39873C4.55425 5.91049 4.77125 5.46293 5.12387 5.12387C5.46293 4.77125 5.91049 4.55425 6.39873 4.5C6.60217 4.51356 6.8056 4.56781 6.99548 4.67631C7.21248 4.77125 9.12477 5.88336 10.142 6.48012L10.3725 6.61573C10.4539 6.66998 10.5217 6.71067 10.5759 6.7378L10.6845 6.8056L13.6812 8.3724C13.8329 7.62172 13.8038 7.38878 13.1528 6.88698C13.2342 6.8463 13.3291 6.8056 13.4105 6.75135C14.1293 6.3038 16.7468 4.78481 17.0045 4.67631C17.1808 4.56781 17.3843 4.51356 17.6013 4.5C18.076 4.55425 18.5235 4.77125 18.8626 5.12387Z" stroke="currentColor" />
        <path d="M12.9623 12.1899L12.1893 12.9629C12.0808 13.0579 11.9045 13.0579 11.8095 12.9629L11.0365 12.1899C10.928 12.0814 10.928 11.9186 11.0365 11.8101L11.8095 11.0371C11.918 10.9286 12.0808 10.9286 12.1893 11.0371L12.9623 11.8101C13.0708 11.9186 13.0708 12.0814 12.9623 12.1899Z" fill="currentColor" />
      </svg>
    </span>;
};

export const RefreshIcon = ({label}) => {
  return <span>
      <svg class="icon-position" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path></svg>
    </span>;
};

export const MarkdownVariablesIcon = ({label}) => {
  return <span>
      <svg class="icon-position" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M3 12v-7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-7"></path><path d="M3 10h18"></path><path d="M10 3v10"></path><path d="M2 17a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-4z"></path></svg>
    </span>;
};

export const DashboardIcon = ({label}) => {
  return <span>
      <svg class="icon-position" fill="none" height="1em" strokeWidth="2" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12.5625 3V21M12 9.75H3M21 15.375H12.5625M7 21H17C19.2091 21 21 19.2091 21 17V7C21 4.79086 19.2091 3 17 3H7C4.79086 3 3 4.79086 3 7V17C3 19.2091 4.79086 21 7 21Z" stroke="currentColor"></path></svg>
      {label && ` ${label}`}
    </span>;
};

export const WorkbookIcon = ({label}) => {
  return <span>
      <svg class="icon-position" fill="none" height="1em" stroke-width="2" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M9.1875 3V15.375M21 15.375H3M7 21H17C19.2091 21 21 19.2091 21 17V7C21 4.79086 19.2091 3 17 3H7C4.79086 3 3 4.79086 3 7V17C3 19.2091 4.79086 21 7 21Z" stroke="currentColor"></path></svg>
      {label && ` ${label}`}
    </span>;
};

export const WorkbookNumberFormatIcon = ({label}) => {
  return <span>
      <svg class="icon-position" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 30 30" stroke-linecap="round" stroke-linejoin="round" height="1.75em" width="1.75em" xmlns="http://www.w3.org/2000/svg"><path d="M8 10v-7l-2 2"></path><path d="M6 16a2 2 0 1 1 4 0c0 .591 -.601 1.46 -1 2l-3 3h4"></path><path d="M15 14a2 2 0 1 0 2 -2a2 2 0 1 0 -2 -2"></path><path d="M6.5 10h3"></path></svg>
    </span>;
};

export const DashboardPreviewIcon = ({label}) => {
  return <span>
      <svg class="icon-position" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M3 16m0 1a1 1 0 0 1 1 -1h3a1 1 0 0 1 1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1z"></path><path d="M4 12v-6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-6"></path><path d="M12 8h4v4"></path><path d="M16 8l-5 5"></path></svg>
    </span>;
};

export const DashboardCatalogIcon = ({label}) => {
  return <span>
      <svg class="icon-position" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M10 19h-6a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1h6a2 2 0 0 1 2 2a2 2 0 0 1 2 -2h6a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-6a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2z"></path><path d="M12 5v16"></path><path d="M7 7h1"></path><path d="M7 11h1"></path><path d="M16 7h1"></path><path d="M16 11h1"></path><path d="M16 15h1"></path></svg>
      {label && ` ${label}`}
    </span>;
};

export const DashboardAddItemIcon = ({label}) => {
  return <span>
      <svg class="icon-position" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M4 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path><path d="M4 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path><path d="M14 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path><path d="M14 7l6 0"></path><path d="M17 4l0 6"></path></svg>
      {label && ` ${label}`}
    </span>;
};

export const DashboardControlIcon = ({label}) => {
  return <span>
      <svg class="icon-position" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M3 3m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z"></path><path d="M3 11l8 -8"></path><path d="M3 17l14 -14"></path></svg>
      {label && ` ${label}`}
    </span>;
};

export const DashboardChartIcon = ({label}) => {
  return <span>
      <svg class="icon-position" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M3 3v18h18"></path><path d="M20 18v3"></path><path d="M16 16v5"></path><path d="M12 13v8"></path><path d="M8 16v5"></path><path d="M3 11c6 0 5 -5 9 -5s3 5 9 5"></path></svg>
      {label && ` ${label}`}
    </span>;
};

export const DashboardPlaceholderIcon = ({label}) => {
  return <span>
      <svg class="icon-position" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M4 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path><path d="M14 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path><path d="M4 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path><path d="M14 17h6m-3 -3v6"></path></svg>
      {label && ` ${label}`}
    </span>;
};

export const DashboardLayoutIcon = ({label}) => {
  return <span>
      <svg class="icon-position" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M4 7l16 0"></path><path d="M4 17l16 0"></path><path d="M7 4l0 16"></path><path d="M17 4l0 16"></path></svg>
      {label && ` ${label}`}
    </span>;
};

export const DashboardTextIcon = ({label}) => {
  return <span>
      <svg class="icon-position" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M4 20l3 0"></path><path d="M14 20l7 0"></path><path d="M6.9 15l6.9 0"></path><path d="M10.2 6.3l5.8 13.7"></path><path d="M5 20l6 -16l2 0l7 16"></path></svg>
      {label && ` ${label}`}
    </span>;
};

export const DashboardStackContainerIcon = ({label}) => {
  return <span>
      <svg class="icon-position" width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 5C4 4.73478 4.10536 4.48043 4.29289 4.29289C4.48043 4.10536 4.73478 4 5 4H19C19.2652 4 19.5196 4.10536 19.7071 4.29289C19.8946 4.48043 20 4.73478 20 5V9C20 9.26522 19.8946 9.51957 19.7071 9.70711C19.5196 9.89464 19.2652 10 19 10H5C4.73478 10 4.48043 9.89464 4.29289 9.70711C4.10536 9.51957 4 9.26522 4 9V5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4 15C4 14.7348 4.10536 14.4804 4.29289 14.2929C4.48043 14.1054 4.73478 14 5 14H12C12.2652 14 12.5196 14.1054 12.7071 14.2929C12.8946 14.4804 13 14.7348 13 15V19C13 19.2652 12.8946 19.5196 12.7071 19.7071C12.5196 19.8946 12.2652 20 12 20H5C4.73478 20 4.48043 19.8946 4.29289 19.7071C4.10536 19.5196 4 19.2652 4 19V15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
      {label && ` ${label}`}
    </span>;
};

export const DashboardPageNavIcon = ({label}) => {
  return <span>
      <svg class="icon-position" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M4 8h16"></path><path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path><path d="M8 4v4"></path></svg>
      {label && ` ${label}`}
    </span>;
};

export const IdeFileIcon = ({color = "#000000"}) => {
  return <span>
      <svg class="icon-position" stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="file-type-icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z"></path><path d="M3 10h18"></path><path d="M10 3v18"></path></svg>
    </span>;
};

<Note>
  **Using a classic dashboard?** [Upgrade it](/visualize-present/dashboards/create#classic-dashboards) to use the features in this guide.
</Note>

A page is a self-contained tab within a dashboard, with its own [layout, items](/visualize-present/dashboards/containers-items), and [filters](/visualize-present/dashboards/filters). Use multiple pages to break a complex dashboard into focused views, separate content for different audiences, or surface drill-downs without forcing viewers to leave the dashboard. Viewers can move between pages using a [page navigation][page-navigation] item.

## Requirements

Creating and modifying dashboard pages requires **Editor**, **Manager**, or **Owner** permissions on the document.

<h2 id="add-page">
  Adding pages
</h2>

<Note>
  Dashboards can have up to **15 pages**.
</Note>

Brand new dashboards are created as a single page with an empty layout where you can add containers and items. To add additional pages:

<Steps>
  <Step noAnchor>
    Click the **Edit** button on the dashboard to enter draft mode.
  </Step>

  <Step noAnchor>
    Click **Add > Page**.
  </Step>
</Steps>

When you add a second page to a dashboard (going from 1 to 2 pages), Omni automatically adds page navigation to both pages so viewers can navigate between them. See Page navigation][page-navigation] for more information.

If you add additional pages beyond the second, Omni copies the page navigation appearance from the previous page to maintain a consistent experience across your dashboard.

<h2 id="duplicate-page">
  Duplicating pages
</h2>

Duplicate existing pages in a dashboard to quickly create new pages with the same layout, containers, and content.

<Steps>
  <Step noAnchor>
    Click the **Edit** button on the dashboard to enter draft mode.
  </Step>

  <Step noAnchor>
    Select the page you want to duplicate.
  </Step>

  <Step noAnchor>
    In the properties panel, click **Duplicate page**.
  </Step>
</Steps>

The new page will appear immediately after the original page in the dashboard navigation. Omni automatically generates a unique name for the duplicated page by appending `Copy` to the original page name. For example, `Dashboard Copy` or `Dashboard Copy 2`.

Going from 1 to 2 pages also adds page navigation; see [Adding pages](#add-page).

## Switching and reordering pages

To switch or reorder pages while editing, use the **page selector** in the toolbar:

* **To switch pages**, click the dropdown to see all pages and select the one you want to work on.
* **To reorder pages**, click the dropdown and then **Re-order**. Drag the pages into the desired order and click **Save**.

<h2 id="settings">
  Advanced page settings
</h2>

To access the settings for a dashboard page:

<Steps>
  <Step noAnchor>
    Click the **Edit** button on the dashboard to enter draft mode.
  </Step>

  <Step noAnchor>
    Select the page you want to configure by clicking on it or using the page selector in the toolbar.
  </Step>

  <Step noAnchor>
    With the page selected, click the <Icon icon="ellipsis-vertical" /> icon in the properties panel.
  </Step>

  <Step noAnchor>
    Select **Advanced settings** from the menu.
  </Step>
</Steps>

The **Advanced settings** dialog will open, where you can configure the following:

### Page key

A unique identifier for the page. Keys must:

* Be unique across all pages in the dashboard
* Contain only letters, numbers, hyphens, and underscores
* Not exceed 40 characters
* Not be one of Omni's reserved system values: `chat`, `download`, `drill`, `edit`, `layout`, `monitor`, `move`, `performance`, `preview`, `publish`, `run`, `save-as`, `schedules`, `share`, `themes`, `transfer`

If you enter an empty value, invalid format, or a key that's already used by another page, you'll see a validation error and won't be able to save until the issue is resolved.

<h2 id="delete-page">
  Deleting pages
</h2>

To delete a dashboard page:

<Steps>
  <Step noAnchor>
    Click the **Edit** button on the dashboard to enter draft mode.
  </Step>

  <Step noAnchor>
    Select the page you want to delete.
  </Step>

  <Step noAnchor>
    In the properties panel, click **Delete page**.
  </Step>
</Steps>

Assets from a deleted page can be re-added to existing pages from the <DashboardCatalogIcon /> **Catalog**.

<Warning>
  Text items on a deleted page cannot be recovered from the <DashboardCatalogIcon /> **Catalog**.
</Warning>

## Next steps

* Learn to [build dashboard layouts](/visualize-present/dashboards/containers-items) with containers and items like charts, text, filters, and controls.
* Customize [page navigation](/visualize-present/dashboards/page-navigation) to control how viewers move between pages, including custom tabs and dynamic labels.
* Configure [filters](/visualize-present/dashboards/filter-display-options) to display filters as button toggles, multi-select dropdowns, single-day pickers, and timeframe controls.

[page-navigation]: /visualize-present/dashboards/page-navigation
