--- title: BasicTabControl --- > Agent instructions: > **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown. > > - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version. > - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt). The BasicTabControl control displays a tab menu according to data provided by a two dimensional array. BasicTabControl doesn't rely on the Kentico database or API — you can use the control to navigate to pages outside of Kentico websites. > **Tip:** **Tip**: If you want to display a tab menu for pages on a Kentico website, you can use the [CMSTabControl](https://docs.kentico.com/k82/references/kentico-controls/cms-controls/cms-controls-navigation/cmstabcontrol.md) control, which has built-in support for loading Kentico pages. ## Getting started The following is a step-by-step tutorial that shows how to display a simple tab menu using the BasicTabControl control: 1. Create a new **Web form** in your web project. 2. Drag the **BasicTabControl** control from the toolbox onto the form. - The code of the BasicTabControl looks like this: ```html ``` 3. Add the following CSS styling code between the tags of the web form's element: ```html ``` > **Info:** This sets CSS styles that modify the appearance of the generated tab menu. The BasicTabControl control renders tabs even without any CSS classes, but they are extremely basic and not very user friendly. > > The example uses the local __ element only for convenience. If you wish to use the control on a Kentico website, it is recommended to define the CSS classes in the website's [stylesheet](https://docs.kentico.com/k82/developing-websites/designing-websites-using-css.md) through the **CSS stylesheets** application. 4. Add the following code just after the __ element to display a stripe under the tabs. ```html
``` 5. Switch to the web form's code behind and add the following reference: ```csharp using CMS.Controls.Configuration; ``` 6. Add the following code to the **Page\_Load** method: ```csharp // Defines and assigns the menu's tabs BasicTabControl1.AddTab(new TabItem { Text = " Home ", RedirectUrl = "http://www.kentico.com" }); BasicTabControl1.AddTab(new TabItem { Text = " Features ", RedirectUrl = "http://www.kentico.com/Product/All-Features" }); BasicTabControl1.AddTab(new TabItem { Text = " Download ", RedirectUrl = "http://www.kentico.com/Download-Demo/Trial-Version", Tooltip = "Some tooltip" }); // Selects the first tab by default BasicTabControl1.SelectedTab = 0; BasicTabControl1.UrlTarget = "_blank"; ``` 7. Save the changes to the web form and its code behind file. 8. Right-click the web form in the Solution explorer and select **View in Browser**. The resulting page displays a tab menu. ![](https://docs.kentico.com/docsassets/k82/basictabcontrol/f49.png) ## Configuration You can set the following properties for the BasicTabControl: | Property name | Description | Sample value | | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | HideControlForZeroRows | Hides the control when no data is loaded. Default value is _false_. | | | RenderedHTML | Allows you to get or set the HTML code rendered by the control.
You need to set this property before the Render event - e.g. in the OnLoad event. | | | RenderLinkTitle | Indicates whether the control renders TITLE tags for the tab links. | | | SelectedTab | Index of the selected tab. | | | SelectFirstItemByDefault | Indicates whether the first tab should be selected by default. | | | TabControlIDPrefix | Prefix that the BasicTabControl uses for all element IDs in the rendered HTML code. Allows you to avoid conflicts when using multiple tab controls on the same page. | "FirstTabs" | | TabControlLayout | Specifies the layout orientation of the tab control. | "Horizontal"
"Vertical" | | Tabs (Obsolete) | A 2 dimensional string array where each row represents a tab and the columns represent the following:
tabs\[0, 0] = title
tabs\[0, 1] = OnClick JavaScript
tabs\[0, 2] = URL
tabs\[0, 3] = tooltip
tabs\[0, 4] = left image URL
tabs\[0, 5] = center image URL
tabs\[0, 6] = right image URL
**Note**:
The image URLs in columns 4, 5 and 6 are optional.
If you specify the center image URL, the image is displayed instead of the title. | tabs\[0, 0] = " Home ";
tabs\[0, 1] = "alert('It is very simple!');";
tabs\[0, 2] = "http://www.kentico.com";
tabs\[0, 3] = "Some tooltip";
tabs\[0, 4] = "leftimage.gif";
tabs\[0, 5] = "centerimage.gif";
tabs\[0, 6] = "rightimage.gif"; | | UrlTarget | Specifies the target frame for all URLs. | "\_blank" | | UseClientScript | Indicates if client script should be generated for each tab. | | | UsePostback | Indicates if the control causes a postback when a users clicks a tab. | | | ZeroRowsText | Text shown when the control is hidden by the **HideControlForZeroRows** property. | "No records found." | | Method | Description | Sample value | | ------ | ----------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | AddTab | Use the **AddTab** method to define the menu's tabs. Accepts **CMS.Controls.Configuration.TabItem** objects as the parameter. | `BasicTabControl1.AddTab(new TabItem { Text = " Home ", OnClientClick = "alert('Alert!');", RedirectUrl = "http://www.kentico.com", Tooltip = "Tooltip" });` | ## Appearance and styling The appearance of the BasicTabControl control is determined by CSS classes. You can use the following CSS classes to modify the design of the control: | CSS class name | Applies to | | ----------------------- | ------------------------------------------------------ | | TabControlTable | Table that contains the tabs ( tag). | | TabControlRow | Table rows ( tags). | | TabControl | Tab items ( tags). | | TabControlSelected | The selected tab item ( tag). | | TabControlLink | Tab item links - if a URL is specified ( tags). | | TabControlLinkSelected | Selected tab item link - if a URL is specified ( tag). | | TabControlLeft | Left side of the tab items ( tags). | | TabControlRight | Right side of the tab items ( tags). | | TabControlSelectedLeft | Left side of the selected tab item ( tag). | | TabControlSelectedRight | Right side of the selected tab item ( tag). |