示例：

/**
 * 工具栏导航信息
 */
class ToolBarInfo {
  /**
   * 下标
   */
  index: number
  /**
   * 标题
   */
  title: string
  /**
   * 选中时的图标
   */
  selected: Resource
  /**
   * 未选中时的图标
   */
  unSelected: Resource
}

@Entry
@Component
struct Index {
  /**
   * 当前选中的下标
   */
  @State currentIndex: number = 0
  /**
   * 工具栏导航图标
   */
  toolBarInfos: ToolBarInfo[] = [
    { index: 0, title: "首页", selected: $r("app.media.ic_home_fill"), unSelected: $r("app.media.ic_home_line") },
    { index: 1, title: "商城", selected: $r("app.media.ic_mall_fill"), unSelected: $r("app.media.ic_mall_line") },
    { index: 2, title: "我", selected: $r("app.media.ic_user_fill"), unSelected: $r("app.media.ic_user_line") },
  ]
  /**
   * 数据
   */
  datas: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

  /**
   * 工具栏
   */
  @Builder NavigationToolBar() {
    Row() {
      ForEach(this.toolBarInfos, (item: ToolBarInfo) => {
        Column({ space: 2 }) {
          Image(item.index === this.currentIndex ? item.selected : item.unSelected)
            .width(24)
            .height(24)
            .fillColor(item.index === this.currentIndex ? $r("app.color.purple_500") : $r("app.color.black"))
          Text(item.title)
            .fontSize(12)
            .lineHeight(17)
            .fontWeight(500)
            .fontColor(item.index === this.currentIndex ? $r("app.color.purple_500") : $r("app.color.black"))
        }
        .width(104)
        .height(56)
        .onClick(() => {
          this.currentIndex = item.index
        })
      })
    }
    .width("100%")
    .justifyContent(FlexAlign.SpaceEvenly)
  }

  build() {
    Column() {
      Navigation() {
        List({ space: 16 }) {
          ForEach(this.datas, (item: number) => {
            ListItem() {
              NavRouter() {
                Text(`NavRouter${item}`)
                  .width("100%")
                  .height(64)
                  .backgroundColor('#FFFFFF')
                  .borderRadius(8)
                  .fontSize(16)
                  .fontWeight(500)
                  .textAlign(TextAlign.Center)
                NavDestination() {
                  Text(`NavigationContent${item}`)
                }
                .title(`NavigationTitle${item}`)
              }
              .id(`Navigation${item}`)
              .onStateChange((isActivated: boolean) => {
                console.log(`是否激活：${isActivated}`)
              })
            }
          })
        }
        .width("90%")
      }
      .title(NavigationTitle)
      .menus(NavigationMenus)
      .toolBar(this.NavigationToolBar)
      .navBarWidth(320)
    }
    .width("100%")
    .height("100%")
    .backgroundColor("#F1F3F5")
  }
}

/**
 * 标题栏
 */
@Builder function NavigationTitle() {
  Column({ space: 4 }) {
    Text("Title")
      .fontSize(30)
      .lineHeight(41)
      .fontWeight(700)
      .fontColor("#182431")
    Text("SubTitle")
      .fontSize(14)
      .lineHeight(19)
      .fontColor("#182431")
      .opacity(0.4)
  }
  .padding(8)
}

/**
 * 导航菜单
 */
@Builder function NavigationMenus() {
  Row({ space: 4 }) {
    Image($r("app.media.ic_home_line"))
      .width(24)
      .height(24)
    Image($r("app.media.ic_plus_fill"))
      .width(24)
      .height(24)
    Image($r("app.media.ic_more_fill"))
      .width(24)
      .height(24)
  }
  .justifyContent(FlexAlign.End)
}

运行结果