diff --git a/en/application-dev/reference/arkui-ts/figures/sidebarcontainer.png b/en/application-dev/reference/arkui-ts/figures/sidebarcontainer.png
new file mode 100644
index 0000000000000000000000000000000000000000..1cbb01859041e2028d76b49db655148cf4eb3062
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/sidebarcontainer.png differ
diff --git a/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md b/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md
new file mode 100644
index 0000000000000000000000000000000000000000..6dc717fffb5d69c1174cca33b0cc2a9433438f37
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md
@@ -0,0 +1,114 @@
+# SideBarContainer
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
+> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+
+
+The **\
shown: string \| PixelMap \| [Resource](../../ui/ts-types.md) ,
hidden: string \| PixelMap \| [Resource](../../ui/ts-types.md) ,
switching?: string \| PixelMap \| [Resource](../../ui/ts-types.md)
} | No| - | Icons of the sidebar control button.
The value **true** means that the sidebar is shown, and **false** means that the sidebar is hidden.| + + +## Example + +``` +@Entry +@Component +struct SideBarContainerExample { + normalIcon : Resource = $r("app.media.user") + selectedIcon: Resource = $r("app.media.userFull") + @State arr: number[] = [1, 2, 3] + @State current: number = 1 + + build() { + SideBarContainer(SideBarContainerType.Embed) + { + Column() { + ForEach(this.arr, (item, index) => { + Column({ space: 5 }) { + Image(this.current === item ? this.selectedIcon : this.normalIcon).width(64).height(64) + Text("Index0" + item) + .fontSize(25) + .fontColor(this.current === item ? '#0A59F7' : '#999') + .fontFamily('source-sans-pro,cursive,sans-serif') + } + .onClick(() => { + this.current = item + }) + }, item => item) + }.width('100%') + .justifyContent(FlexAlign.SpaceEvenly) + .backgroundColor('#19000000') + RowSplit() { + Column(){ + Text('Split page one').fontSize(30) + }.justifyContent(FlexAlign.Center) + Column(){ + Text('Split page two').fontSize(30) + }.justifyContent(FlexAlign.Center) + }.width('100%') + } + .sideBarWidth(240) + .minSideBarWidth(210) + .maxSideBarWidth(260) + .onChange((value: boolean) => { + console.info('status:' + value) + }) + } +} +``` + +![](figures/sidebarcontainer.png)