docs: 增加 breadcrumb、dropdown、menu、pagination 组件的api英文文档 (#1232)

* docs: 增加 breadcrumb、dropdown、menu、pagination 组件的api英文文档

* docs: menu 组件英文文档翻译内容调整

---------

Co-authored-by: James <[email protected]>

docs/web/api/breadcrumb.en-US.md

@@ -0,0 +1,36 @@
+---
+title: Breadcrumb
+description:Displays the position of the current page in the system hierarchy, and can return to any previous page level.
+isComponent: true
+usage: { title: '', description: '' }
+spline: navigation
+---
+
+### Basic breadcrumb
+
+Suitable for a wide range of basic uses, the system has more than two levels of hierarchy for switching up any level of content.
+
+{{ base }}
+
+### Breadcrumbs with icons
+
+Can customize each content, unified icon plus text, icon placed in front of the text.
+
+{{ icon }}
+
+### Custom separator breadcrumbs
+
+Customize`separator`the separator character through the separator property, and it is recommended to use an icon instead of a text symbol.
+
+{{ custom }}
+
+<!-- ### Breadcrumbs with Dropdown
+Breadcrumbs support dropdown menus. It is recommended to avoid using breadcrumbs separators with dropdowns.。
+
+{{ dropdown }} -->
+
+### Using Options to Configure Breadcrumbs
+
+Use the `options` property to configure the content of the breadcrumbs.
+
+{{ options }}

docs/web/api/dropdown.en-US.md

@@ -0,0 +1,61 @@
+---
+title: Dropdown
+description:It is used to carry too many operation sets and accept more operations through drop-down expansion.
+isComponent: true
+usage: { title: "", description: "" }
+spline: navigation
+---
+
+### Text drop-down menu
+
+The text button triggers a drop-down menu. It is commonly used in storage operation scenarios where space is extremely limited, and is generally used to store detailed operations in the form.
+
+{{ base }}
+
+### Button drop-down menu
+
+A normal button triggers a drop-down menu. It is often used to operate storage scenes.
+
+{{ button }}
+
+### With Split Line drop-down menu
+
+The different pull-down menu operations are distinguished by dividing lines. It is often used in scenarios where the results of different operations need to be distinguished.
+
+{{ split }}
+
+### Multi-level drop-down menu
+
+Action drop-down menu with logical hierarchy. It is often used in operational scenarios where multiple layers of logic need to be accommodated.
+
+{{ multiple }}
+
+### Drop-down menu with disabled action items
+
+The operation items of the drop-down menu can be set to be disabled. This is often used to disable some of the action items.
+
+{{ disabled }}
+
+### Customize drop-down menus for additional properties
+
+The drop-down menu depends on the`Popup`component and can pass through`Popup`the properties of the custom Popup component.
+
+{{ custom }}
+
+### Drop-down menu to define maximum height
+
+The drop-down menu supports defining the maximum height.
+
+{{ long }}
+
+### Custom theme drop-down menu
+
+The menu items of the drop-down menu support custom themes, which are used according to specific scenarios.
+
+{{ theme }}
+
+### Drop-down menu expanded to the left
+
+The drop-down menu supports expansion to the left.
+
+{{ left }}

docs/web/api/menu.en-US.md

@@ -0,0 +1,70 @@
+---
+title: Menu
+description:Used to host the architecture of the site and provide a menu list to jump to.
+isComponent: true
+usage: { title: '', description: '' }
+spline: navigation
+---
+
+### Top Navigation
+
+#### Single-layer navigation
+
+There is only a single-layer structure of the top navigation, click to jump. It can be used on simple hierarchical websites that host a single product or a single line of business.
+
+{{ single }}
+
+#### Two-layer navigation
+
+The top navigation may host 2 levels of page navigation. It is often used to focus on secondary page navigation under a single business line.
+
+{{ double }}
+
+#### Multi-layer storage navigation
+
+The top navigation drop-down menu contains 2-3 levels of page navigation, which can be expanded to group display and is often used for fast switching navigation under multiple businesses.
+
+{{ multiple }}
+
+#### Customizable top navigation
+
+Custom functions can be added to the original navigation. It is used in business scenarios with complex logic or specific requirements.
+
+{{ custom-header }}
+
+### Side navigation
+
+#### Single-layer navigation
+
+There is only a single-layer structure of the side navigation, click to jump. It is generally combined with the single-layer top navigation as the side navigation of the secondary page.
+
+{{ single-side }}
+
+#### Tiled Side Navigation
+
+The side navigation can carry 1-3 levels of page navigation and be displayed tiled. It is suitable for deeper level websites.
+
+{{ multi-side }}
+
+<!-- #### Popup-style Side Navigation
+
+The side navigation can accommodate 1-3 level page navigation and uses a popup to collect deep page navigation. It is suitable for architectures with deep levels and many pages on each level that need to be collected.
+
+{{ popup-side }} -->
+
+#### Groupable Side Navigation
+
+Grouping large numbers of pages for display to facilitate user understanding and searching. Generally used on websites with a large number of businesses or pages to display.
+{{ group-side }}
+
+<!-- #### Customizable Side Navigation
+
+Custom functions can be added on the original navigation. Suitable for complex logic or specific business scenarios.
+
+{{ custom-side }} -->
+
+#### Collapsible Side Navigation
+
+A collapse button is provided on the side navigation, which can minimize the sidebar when clicked. Commonly used in side navigation with icons.
+
+{{ closable-side }}

docs/web/api/pagination.en-US.md

@@ -0,0 +1,54 @@
+---
+title: Pagination
+description:Controls for switching content within a module.
+isComponent: true
+usage: { title: '', description: '' }
+spline: navigation
+---
+
+### Base paging
+
+#### Small number of pages
+The most basic paging control, only show the page number. It is recommended to use lightweight pagination scenarios with less than 10 pages of content.
+
+{{ base }}
+
+#### More pages
+With a large amount of data to display, paging allows users to quickly locate the current page number. It is recommended to use pagination scenarios with more than 10 pages of content.
+
+{{ more }}
+
+### Pagination with total data display
+The data in the associated module is displayed, so that the user can quickly understand the data level without browsing all of them. Often used for statistics in tables.
+
+{{ total }}
+
+### Pagination with page display quantity selection
+The number of items displayed on each page can be adjusted according to user requirements.
+
+{{ page-num }}
+
+### Pagination with quick jump
+When the data needs to be quickly located, select to display the quick jump page.
+
+{{ jump }}
+
+### Minimalist pagination
+Extremely simple page control, only show the current page, the total number of pages and page up and down. There is less horizontal space within the module and no need to pinpoint the scene of a specific page.
+
+{{ simple }}
+
+### Mini Pagination
+Remove the border of the pagination control while retaining its main function. This is suitable for scenarios where space is limited within the module and lightweight pagination is needed to increase page utilization.
+
+{{ mini }}
+
+### Minimalist mini version pagination
+Smaller size of the mini-style paging control, suitable for embedded in other components in the paging navigation.
+
+{{ simple-mini }}
+
+### PaginationMini Subassembly
+The smallest unit paging control, suitable for embedded in other components with smaller space.
+
+{{ pagination-mini }}