# topMenu, leftMenu, tabMenu, page style custom

**URL:** <https://ask.selectfromuser.com/t/topmenu-leftmenu-tabmenu-page-style-custom/375>\
**Category:** 공지사항\
**Tags:** topmenu, leftmenu, tabmenu, page, style\
**Created:** [2월 11, 2025, 1:00오후 UTC](https://ask.selectfromuser.com/t/topmenu-leftmenu-tabmenu-page-style-custom/375 "2025-02-11T13:00:29Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![hbkim](https://yyz2.discourse-cdn.com/flex032/user_avatar/ask.selectfromuser.com/hbkim/32/23_2.png) [@hbkim](https://ask.selectfromuser.com/u/hbkim)\
**Post date:** [2월 11, 2025, 1:00오후 UTC](https://ask.selectfromuser.com/t/topmenu-leftmenu-tabmenu-page-style-custom/375/1 "2025-02-11T13:00:29Z")

</div>

## 레이아웃 구성 요소

YAML 파일을 통해 **탑메뉴, 왼쪽 메뉴, 탭메뉴, 페이지** 등의 스타일을 설정할 수 있습니다.

```yaml
layout:
  topMenu:
  leftMenu:
  tabMenu:
  page:

```

### 1️⃣ **Top 메뉴바 설정 (`topMenu`)**

- 최상단 메뉴의 레이아웃을 정의합니다.
- `logoTemplate`을 사용하여 **커스텀 로고 및 타이틀** 을 설정할 수 있습니다.

```yaml
layout:
  topMenu:
    logoTemplate: |
      <div class="flex text-white hover:bg-white/10 rounded-lg p-2 -mx-2 transition items-center gap-2">
        <div class="relative flex h-full items-center justify-center h-6 w-6">
          <img src="https://supabase.com/docs/favicon/favicon-48x48.png" />
        </div>
        <div class="text-sm font-semibold">Admin</div>
      </div>

```

- 아이콘과 `Admin` 텍스트를 포함한 **로고 영역** 이 생성됩니다.
- `hover:bg-white/10`를 통해 **마우스 호버 효과** 를 추가합니다.
- logoTemplate 안에서 `<svg>`를 활용할 수 있습니다.

```yaml
    logoTemplate: |
      <div class="flex text-white hover:bg-white/10 rounded-lg p-2 -mx-2 transition items-center gap-2">
        <div class="relative flex h-full items-center justify-center h-6 w-6">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="12" cy="12" r="9" stroke="white" stroke-width="2" fill="transparent"/>
            <circle cx="12" cy="12" r="4" fill="white"/>
          </svg>
        </div>
        <div class="text-sm font-semibold">Admin</div>
      </div>

```

* * *

### 2️⃣ 사이드 메뉴 (Left Menu)

- **왼쪽 사이드바 스타일** 및 레이아웃을 설정할 수 있습니다.

```yaml
layout:
  leftMenu:
    containerClass: bg-slate-50 border-r border-slate-200 text-slate-600
    containerStyle:
      width: 250px
    itemClass: >
      text-sm font-bold text-sm rounded-lg
      hover:text-blue-600/90
    linkClass: > 
      py-3 no-underline hover:bg-slate-200 rounded-lg transition

```

- `containerClass`: **배경색** , **테두리 스타일** 지정 (`bg-slate-50`)
- `containerStyle`: **사이드바 너비** 지정 (`250px`)
- `itemClass`: 메뉴 항목 디자인 (글꼴 크기, 둥근 모서리, hover 효과)
- `linkClass`: **메뉴 링크 스타일** , 마우스 오버 시 배경 변경

* * *

### 3️⃣ 탭 메뉴 (Tab Menu)

- **페이지 내 상단 탭 스타일** 을 설정합니다.

```yaml
layout:
  tabMenu:
    containerClass: bg-white text-slate-600 font-bold text-sm px-3
    itemClass: p-3 px-4 rounded-lg mt-3 hover:text-blue-600/90
    itemActiveClass: bg-blue-200/30 text-blue-600/90

```

- `containerClass`: 배경을 하얀색 (`bg-white`)으로 설정
- `itemActiveClass`: 선택된 탭의 배경색을 연한 파란색 (`bg-blue-200/30`)으로 표시

* * *

### 4️⃣ 페이지 컨텐츠 영역 (`page`)

- **메인 페이지의 여백 및 스타일을 설정** 합니다.

```yaml
layout:
  page:
    containerStyle:
      marginTop: 55px
      marginLeft: 250px
    contentClass: p-6
    contentStyle: 
      minHeight: calc(100vh - 98px)

```

- `marginTop`: 상단 메뉴바의 높이(55px)만큼 마진 추가
- `marginLeft`: 사이드 메뉴바(250px)만큼 마진 추가
- `minHeight`: 화면 높이(`100vh`)에서 **헤더 높이를 제외한 높이 자동 조정**

* * *

위 설정들을 통해 필요에 따라 색상, 간격, 아이콘 등을 커스텀하여 더 나은 사용자 경험(UX)을 제공해보세요.

이해가 어렵거나 도움이 필요하시면 편하게 문의주시기 바랍니다.  
감사합니다.

---

<div class="post-metadata">

**Author:** ![jhlee](https://yyz2.discourse-cdn.com/flex032/user_avatar/ask.selectfromuser.com/jhlee/32/20_2.png) [@jhlee](https://ask.selectfromuser.com/u/jhlee)\
**Post date:** [2월 13, 2025, 11:14오전 UTC](https://ask.selectfromuser.com/t/topmenu-leftmenu-tabmenu-page-style-custom/375/2 "2025-02-13T11:14:44Z")

</div>

## 예제1

```yml
layout:
  topMenu:
    logoTemplate: |
      <div class="flex text-white hover:bg-white/10 rounded-lg p-2 -mx-2 transition items-center gap-2">
        
        <div class="relative flex h-full items-center justify-center h-6 w-6">
          <img src="https://supabase.com/docs/favicon/favicon-48x48.png" />
        </div>
        <div class="text-sm font-semibold">Admin</div>
      </div>

```

 ![스크린샷 2025-02-11 오후 7.13.57](https://canada1.discourse-cdn.com/flex032/uploads/selectfromuser/original/1X/fbdfe738d4e69e84e3c01e030280125b1e93e84b.png)

## 예제2

```yml
layout:
  head:
  - tag: script
    # src: https://cdn.tailwindcss.com
    src: https://cdn.jsdelivr.net/npm/tailwindcss-cdn@3.4.10/tailwindcss.js

  leftMenu:
    containerClass: bg-slate-50 border-r border-slate-200 text-slate-600
    containerStyle:
      width: 250px
    itemClass: >
      text-sm font-bold text-sm rounded-lg
      hover:text-blue-600/90
      [&>.router-link-active]:!text-blue-600/90
    linkClass: > 
      py-3 no-underline hover:bg-slate-200 rounded-lg transition
  tabMenu:
    containerClass: bg-white text-slate-600 font-bold text-sm px-3
    containerStyle: none
    itemClass: p-3 px-4 rounded-lg mt-3 hover:text-blue-600/90
    itemActiveClass: bg-blue-200/30 text-blue-600/90
  page:
    containerStyle:
      marginTop: 55px
      marginLeft: 250px
    contentClass: p-6
    contentStyle: 
      minHeight: calc(100vh - 98px)
    
  topMenu:
    containerClass: fixed w-screen z-30 bg-white text-slate-600 border-b border-slate-200 px-2 [&>a]:text-zinc-800
    logoClass: text-slate-600
    itemClass: font-medium 
    linkClass: p-3 text-slate-700 no-underline cursor-pointer rounded-lg transition hover:bg-slate-100
    logoTemplate: |
      <div class="flex text-zinc-800 hover:bg-white/10 rounded-lg p-2 -mx-2 transition items-center gap-2">
        
        <div class="relative flex h-full items-center justify-center h-6 w-6">
          <img src="https://supabase.com/docs/favicon/favicon-48x48.png" />
          
          </svg>
        </div>
        <div class="text-sm font-semibold">Admin</div>
      </div>

```

 ![스크린샷 2025-02-11 오후 7.23.11](https://canada1.discourse-cdn.com/flex032/uploads/selectfromuser/original/1X/05d417563596a42eb0fcf1c8662feeb671995cc9.png)

## 예제3

```yml
layout:
  head:
  - tag: script
    # src: https://cdn.tailwindcss.com
    src: https://cdn.jsdelivr.net/npm/tailwindcss-cdn@3.4.10/tailwindcss.js

  
  leftMenu:
    containerClass: bg-white shadow-lg
    containerStyle:
      width: 200px
    itemClass: >
      text-xs text-slate-800 font-medium hover:bg-slate-100
      [&>.router-link-active]:font-bold 
      [&>.router-link-active]:bg-slate-50
      [&>.router-link-active]:!text-indigo-700
    linkClass: no-underline text-slate-800 hover:text-indigo-700
  tabMenu:
    containerClass: bg-slate-50 border-b border-slate-200 text-xs font-bold
    itemClass: text-indigo-500 p-3 px-4
    itemActiveClass: bg-indigo-600/90 text-slate-50
  page:
    containerStyle:
      marginLeft: 200px

  topMenu:
    containerClass: fixed w-screen z-30 bg-slate-800 px-2
    logoClass: text-slate-50
    itemClass: font-medium text-xs
    linkClass: p-3 text-slate-100 no-underline cursor-pointer rounded-lg transition hover:bg-slate-100/10
    navClass: font-medium text-xs p-3 text-slate-100 no-underline cursor-pointer rounded-lg transition hover:bg-slate-100/10

```

 ![스크린샷 2025-02-11 오후 7.15.14](https://canada1.discourse-cdn.com/flex032/uploads/selectfromuser/original/1X/72553044c20ee5af5f215318badf206879897b41.png)