Tabs

A <tab>-Tag references to either an existing or a new tab in the system configuration.

Tab attribute reference

A <tab>-Tag can have the following attributes:

AttributeDescriptionTypeRequired
idDefines the identifier that is used referencing the section.typeIdrequired
translateDefines the field that should be translatable. Provide label to make the label translatable.stringoptional
sortOrderDefines the sort order of the section. High numbers push the section to the bottom of the page; low numbers push the section to the top.floatoptional
classAdds a defined CSS class to the rendered tab HTML element.stringoptional

Tab node reference

A <tab>-Tag can have the following child:

NodeDescriptionType
labelDefines the label that is displayed in the frontend.string

Example: Create a tab

The following code snippet demonstrates the creation of a new tab with example data.

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="A_UNIQUE_ID" translate="label" class="a-custom-css-class-to-style-this-tab" sortOrder="10">
            <label>A meaningful label</label>
        </tab>
    </system>
</config>

The snippet above creates a new tab with the identifier A_UNIQUE_ID. As the translate-attribute is defined and references the label, the label-node is translatable. During the rendering process, the CSS class a-custom-css-class-to-style-this-tab will be applied on the HTML element that was created for this tab.
The sortOrder-attribute with the value of 10 defines the position of the tab in the list of all tabs when rendered.

Sections

A <section>-Tag references to either an existing or a new section in the system configuration.

Section attribute reference

A <section>-Tag can have the following attributes:

AttributeDescriptionTypeRequired
idDefines the identifier that is used referencing the section.typeIdrequired
translateDefines the field that should be translatable. Provide label to make the label translatable.stringoptional
typeDefines the input type of the rendered HTML element. Defaults to text.stringoptional
sortOrderDefines the sort order of the section. High numbers will push the section to the bottom of the page; low numbers will push the section to the top.floatoptional
showInDefaultDefines whether the section is shown in the default configuration scope. Specify 1 to show the section and 0 to hide the section.intoptional
showInStoreDefines whether the section is shown on store level. Specify 1 to show the section and 0 to hide the section.intoptional
showInWebsiteDefines whether the section is shown on website level. Specify 1 to show the section and 0 to hide the section.intoptional
canRestoreDefines if the section can be restored to default.intoptional
advancedDeprecated since 100.0.2.booloptional
extendsBy providing an identifier of another section, the content of this node will extend the section that you referenced.stringoptional

Section node reference

A <section>-Tag can have the following children:

NodeDescriptionType
labelDefines the label that is displayed in the frontend.string
classAdds a defined CSS class to the rendered section HTML element.string
tabReferences the associated tab. Expects the ID of the tab.typeTabId
header_cssNeither used nor evaluated at the time of this writing.string
resourceReferences an ACL resource to provide permission settings for this section.typeAclResourceId
groupDefine one or more subgroups.typeGroup
frontend_modelSpecifies a different frontend model to change the rendering and modify the output.typeModel
includeUsed to include additional system_include.xsd compatible files. Usually used to structure large system.xml files.includeType